Zustand-Yjs

Zustand-Yjs

Disclaimer: This is a work in progress. Do not use this library in production, breaking change will happens before arriving to the first stable version.

Create zustand's store with Y.Array or Y.Doc types. We include typescript definitions.

Getting started

Install yjs, zustand and zustand-yjs.

yarn add zustand-yjs yjs zustand

Zustand-yjs manage a store of Y.Doc, allowing you to connect and disconnect easily.

import * as Y from 'yjs'
import { useYDoc } from 'zustand-yjs'

const connectDoc = (doc: Y.Doc) => {
  console.log('connect to a provider with room', doc.guid)
  return () => console.log('disconnect', doc.guid)
}

const App = () => {
  const yDoc = useYDoc('myDocGuid', connectDoc)
  return <div></div>
}

From this, you can use the docs with Y.Array, Y.Map. Other Y-types are coming.

import * as Y from 'yjs'
import { useYDoc } from 'zustand-yjs'

const connectDoc = (doc: Y.Doc) => {
  console.log('connect to a provider with room', doc.guid)
  return () => console.log('disconnect', doc.guid)
}

const App = () => {
  const yDoc = useYDoc('myDocGuid', connectDoc)
  const { data, push } = useYArray<string>(yDoc.getArray('usernames'))
  return (
    <div>
      <button onClick={() => push([`username #${data.length}`])}>
        New Username
      </button>
      <ul>
        {data.map((username, index) => (
          <li key={index}>{username}</li>
        ))}
      </ul>
    </div>
  )
}

Here you are, you have a reactive store!

API

`useYDoc(guid: string, connect: (doc: Y.Doc) => () => void)`

params

string guid: The Y.Doc#guid
(doc: Y.Doc) => () => void) connect: The connect function triggered on the first mount of the Y.Doc. Should return an unconnect function triggered on unmount.
- params
  - Y.Doc doc: The mounted doc, with a Y.Doc#guid
- returns
  - () => void : disconnect function that will be called on unmount.

returns

Y.Doc: The created Y.Doc

`useYArray(doc: Y.Array)`

params

Y.Array<T> doc: A Y.Array to use inside your component

returns

T[] data: The current data of the Y.Array used
forEach: See Y.Array#forEach
map: See Y.Array#map
slice: See Y.Array#slice
get: See Y.Array#get
delete: See Y.Array#delete
unshift: See Y.Array#unshift
push: See Y.Array#push
insert: See Y.Array#insert

`useYMap(doc: Y.Array)`

params

Y.Map<T, U extends Record<string, T>> doc: A Y.Map to use inside your component. T is the type of the record values, U is the type of the return data.

returns

U data: The current data of the Y.Map used
set: See Y.Map#set
get: See Y.Map#get
has: See Y.Map#has
delete: See Y.Map#delete
forEach: See Y.Map#forEach
entries: See Y.Map#entries
values: See Y.Map#values
keys: See Y.Map#keys

Run the example

Clone the Repository
yarn install
cd example; yarn
yarn start

The example doesn't mount any connector for Y.Doc (yet). So don't expect syncing. To do some sync, you can edit example/src/organizationDoc.ts and add some provider to the main document.

Special Thanks

Relm, svelt-yjs, the repo we started with, many thanks for publishing.
YJS – CRDT framework that deserve love and support
Zustand – A small, fast and scaleable bearbones state-management solution. Our build system is taken from there.