Sign in

API Reference - @liveblocks/zustand

@liveblocks/zustand provides you with Zustand bindings for our realtime collaboration APIs, built on top of WebSockets. Read our getting started guides to learn more.

Middleware

The liveblocks middleware lets you connect a Zustand state to Liveblocks Presence and Storage features.

import create from "zustand";import { liveblocks } from "@liveblocks/zustand";
const useStore = create( liveblocks( (set) => ({ /* state and actions */ }), { client, presenceMapping: {}, storageMapping: {}, } ));
Arguments
  • stateCreatorStateCreator

    The Zustand state creator function.

  • optionsLiveblocksMiddlewareOptions

    Configuration object for the Liveblocks middleware.

Options
  • clientClient

    The Liveblocks client instance created with createClient().

  • presenceMappingPresenceMapping

    Optional mapping to synchronize Zustand state with Liveblocks presence.

  • storageMappingStorageMapping

    Optional mapping to synchronize Zustand state with Liveblocks storage.

client

See different authentication methods in the createClient method.

import { createClient } from "@liveblocks/client";import { liveblocks } from "@liveblocks/zustand";
const client = createClient({ authEndpoint: "/api/liveblocks-auth",});
liveblocks(/* Zustand config */, { client })

presenceMapping

Mapping used to synchronize a part of your Zustand state with one Liveblocks Room presence.

const useStore = create(  liveblocks(    (set) => ({      cursor: { x: 0, y: 0 },    }),    {      client,      presenceMapping: { cursor: true },    }  ));

storageMapping

Mapping used to synchronize a part of your Zustand state with one Liveblocks room storage.

const useStore = create(  liveblocks(    (set) => ({      scientist: { name: "" },    }),    {      client,      storageMapping: { scientist: true },    }  ));

state.liveblocks

Liveblocks extra state attached by the liveblocks.

enterRoom

Enters a room and starts syncing it with your Zustand state.

  • roomId: The room’s ID.
const {  liveblocks: { enterRoom },} = useStore();
enterRoom("roomId");
Arguments
  • roomIdstring

    The ID of the room to enter.

If this is the first time you're entering the room, the room is initialized fromom your local Zustand state (only for the keys mentioned in your storageMapping configuration).

leaveRoom

Leaves the current room and stops syncing it with Zustand state.

const {  liveblocks: { leaveRoom },} = useStore();
leaveRoom();
Arguments
None

room

The Room currently synced to your Zustand state.

const {  liveblocks: { room },} = useStore();

others

Other users in the room. Empty when no room is currently synced.

const {  liveblocks: { others },} = useStore();

isStorageLoading

Whether or not the room storage is currently loading.

const {  liveblocks: { isStorageLoading },} = useStore();

status

Gets the current WebSocket connection status of the room.

const {  liveblocks: { status },} = useStore();

The possible value are: initial, connecting, connected, reconnecting, or disconnected.

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.