LiveCollaborationTrigger

If you implement live collaboration support and want to expose the same UI button as on excalidraw.com, you can render the <LiveCollaborationTrigger/> component using the renderTopRightUI prop.

You'll need to supply onSelect() to handle opening of your collaboration dialog, but the button will display appState.collaborators count provided you have supplied it.

Prop	Type	Required	Default	Description
`onSelect`	`function`	Yes		Handler called when the user clicks on the button
`isCollaborating`	`boolean`	Yes	false	Whether live collaboration session is in effect. Modifies button style.

import { useState } from "react";
import { Excalidraw, LiveCollaborationTrigger } from "@excalidraw/excalidraw";

function App() {
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
  const [isCollaborating, setIsCollaborating] = useState(false);
  return (
    <div style={{ height: "500px" }}>
      <p style={{ fontSize: "16px" }}>
        Selecting the checkbox to see the collaborator count
      </p>
      <label style={{ fontSize: "16px", fontWeight: "bold" }}>
        <input
          type="checkbox"
          checked={isCollaborating}
          onChange={() => {
            if (!isCollaborating) {
              const collaborators = new Map();
              collaborators.set("id1", {
                username: "Doremon",
                avatarUrl: "https://example.com/doremon.png",
              });
              collaborators.set("id3", {
                username: "Pika",
                avatarUrl: "https://example.com/pika.jpeg",
              });
              excalidrawAPI.updateScene({ collaborators });
            } else {
              excalidrawAPI.updateScene({
                collaborators: new Map(),
              });
            }
            setIsCollaborating(!isCollaborating);
          }}
        />
        Show Collaborators
      </label>
      <Excalidraw
        ref={(api) => setExcalidrawAPI(api)}
        renderTopRightUI={() => (
          <LiveCollaborationTrigger
            isCollaborating={isCollaborating}
            onSelect={() => {
              window.alert("You clicked on collab button");
              setIsCollaborating(true);
            }}
          />
        )}
      ></Excalidraw>
    </div>
  );
}