API Reference - @liveblocks/zustand

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: {},
}
)
);

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 })

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 },
}
)
);

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 },
}
)
);

Liveblocks extra state attached by the middleware.

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", {});

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");

The room currently synced to your zustand state.

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

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

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

Whether or not the room storage is currently loading.

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

Connection state of the room.

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

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