Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
zustand-yjs
Advanced tools
Readme
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.
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!
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.
doc
: The mounted doc, with a Y.Doc#guid
returns
Y.Doc
: The created Y.DocuseYArray(doc: Y.Array)
params
Y.Array<T>
doc: A Y.Array to use inside your componentreturns
T[]
data: The current data of the Y.Array useduseYMap(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 usedyarn 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.
See the LICENSE file for license rights and limitations (MIT).
See the CONTRIBUTE file for contribution guidelines
Thanks goes to these wonderful people (emoji key):
felipenovaes 💻 | Neftaly Hernandez 💻 🐛 | Nicolas Schmidt 🤔 👀 | hfroger 🤔 👀 💻 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Zustand Stores with Yjs
The npm package zustand-yjs receives a total of 12 weekly downloads. As such, zustand-yjs popularity was classified as not popular.
We found that zustand-yjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.