docs

API Reference - @liveblocks/zustand

Middleware

Middleware that lets you connect a Zustand state to Liveblocks Presence and Storage features.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import create from "zustand";
import { middleware } from "@liveblocks/zustand";


const useStore = create(
  middleware(
    (set) => ({
      /* state and actions */
    }),
    {
      client,
      presenceMapping: {},
      storageMapping: {},
    }
  )
);

Option: client

See different authentication methods at @liveblocks-client#createClient.

1
2
3
4
5
6
7
8
import { createClient } from "@liveblocks/client";
import { middleware } from "@liveblocks/zustand";


const client = createClient({
  authEndpoint: "/api/auth",
});


middleware(/* zustand config */, { client })

Option: presenceMapping

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

1
2
3
4
5
6
7
8
9
10
11
const useStore = create(
  middleware(
    (set) => ({
      cursor: { x: 0, y: 0 },
    }),
    {
      client,
      presenceMapping: { cursor: true },
    }
  )
);

Option: storageMapping

Mapping used to synchronize a part of your zustand state with one Liveblocks Room storage.

1
2
3
4
5
6
7
8
9
10
11
const useStore = create(
  middleware(
    (set) => ({
      scientist: { name: "" },
    }),
    {
      client,
      storageMapping: { scientist: true },
    }
  )
);

state.liveblocks

Liveblocks extra state attached by the middleware.

state.liveblocks.enterRoom

Enters a room and starts sync it with zustand state.

  • roomId: The id of the room.
  • initialState: The initial state of the room storage.
1
2
3
4
5
const {
  liveblocks: { enterRoom },
} = useStore();


enterRoom("roomId", {});

state.liveblocks.leaveRoom

Leaves a room and stops sync it with zustand state.

  • roomId: The id of the room.
1
2
3
4
5
const {
  liveblocks: { leaveRoom },
} = useStore();


leaveRoom("roomId");

state.liveblocks.room

The room currently synced to your zustand state.

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

state.liveblocks.others

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

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

state.liveblocks.isStorageLoading

Whether or not the room storage is currently loading.

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

state.liveblocks.connection

Connection state of the room.

The value can be : authenticating, connecting, open, failed, closed or unavailable.

1
2
3
const {
  liveblocks: { connection },
} = useStore();