createPresenceStateDerivation • tldraw Docs

Creates a derivation that represents the current presence state of the current user.

This function returns a derivation factory that, when given a store, creates a computed signal containing the user's current presence state. The presence state includes information like cursor position, selected shapes, camera position, and user metadata that gets synchronized in multiplayer scenarios.

function createPresenceStateDerivation(
  $user: Signal<null | TLUser>,
  opts?: CreatePresenceStateDerivationOpts,
): (store: TLStore) => Signal<null | TLInstancePresence, unknown>;

Example

import { createPresenceStateDerivation } from "@tldraw/tlschema";
import { atom } from "@tldraw/state";

const userSignal = atom("user", {
  id: "user-123",
  name: "Alice",
  color: "#ff0000",
  meta: {},
});
const presenceDerivation = createPresenceStateDerivation(userSignal);

// Use with a store to get reactive presence state
const presenceState = presenceDerivation(store);
console.log(presenceState.get()); // Current user presence or null

Parameters

Name	Description
`$user`	`Signal<null \| TLUser>;` A reactive signal containing the user information, or `null` when anonymous
`opts`	`CreatePresenceStateDerivationOpts;` Optional configuration for instance ID and presence derivation

Returns

(store: TLStore) => Signal<null | TLInstancePresence, unknown>;

A function that takes a store and returns a computed signal of the user's presence state