# API Reference

## @liveblocks/zustand

`@liveblocks/zustand` provides you with [Zustand](https://docs.pmnd.rs/zustand) bindings for our realtime collaboration APIs, built on top of WebSockets. Read our [getting started](/content/docs/get-started/index.html) guides to learn more.

## [Middleware](/content/docs/api-reference/liveblocks-zustand#Middleware/index.html)

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

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

### Arguments

- **stateCreator**: Zustand state creator function.
- **options**: Liveblocks Middleware Options  
  - **client**: The Liveblocks client instance created with `createClient()`.  
  - **presenceMapping**: Optional mapping to synchronize Zustand state with Liveblocks presence.  
  - **storageMapping**: Optional mapping to synchronize Zustand state with Liveblocks storage.

### [client](/content/docs/api-reference/liveblocks-zustand#middleware-option-client/index.html)

See different authentication methods in the [`createClient`](/content/docs/api-reference/liveblocks-client#createClient/index.html) method.

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

### [presenceMapping](/content/docs/api-reference/liveblocks-zustand#middleware-option-presence-mapping/index.html)

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

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

### [storageMapping](/content/docs/api-reference/liveblocks-zustand#middleware-option-storage-mapping/index.html)

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

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

## [state.liveblocks](/content/docs/api-reference/liveblocks-zustand#liveblocks-state/index.html)

Liveblocks extra state attached by the liveblocks.

### [enterRoom](/content/docs/api-reference/liveblocks-zustand#liveblocks-state-enter-room/index.html)

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

- `roomId`: The room’s ID.

```js
const {  liveblocks: { enterRoom },} = useStore();
enterRoom("roomId");
```

### Arguments

- **roomId**: string - The ID of the room to enter.  
- **options**: object  
  - **engine**: 1 | 2 - Preferred storage engine version to use when creating the room. Only takes effect if the room doesn't exist yet.

### [leaveRoom](/content/docs/api-reference/liveblocks-zustand#liveblocks-state-leave-room/index.html)

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

```js
const {  liveblocks: { leaveRoom },} = useStore();
leaveRoom();
```

### [room](/content/docs/api-reference/liveblocks-zustand#liveblocks-state-room/index.html)

The [`Room`](/content/docs/api-reference/liveblocks-client#room/index.html) currently synced to your Zustand state.

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

### [others](/content/docs/api-reference/liveblocks-zustand#liveblocks-state-others/index.html)

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

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

### [isStorageLoading](/content/docs/api-reference/liveblocks-zustand#liveblocks-state-is-storage-loading/index.html)

Whether or not the room storage is currently loading.

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

### [status](/content/docs/api-reference/liveblocks-zustand#liveblocks-state-status/index.html)

Gets the current WebSocket connection status of the room.

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

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