valtio-yjs-read-only 💊🚀

valtio-yjs-read-only makes yjs states reading easy.

What is this

• valtio is a proxy state library for ReactJS and VanillaJS.
• yjs is an implementation of CRDT algorithm (which allows to merge client data without server coordination).
• valtio-yjs is a two-way binding to bridge them.

valtio-yjs-read-only is a fork of valtio-yjs that makes the yjs documents read only.

Project status

Please, check the original valtio-yjs project.

We are following their versions and making them read only 🧐

Install

1npm install valtio-yjs-read-only valtio yjs

1yarn add valtio-yjs-read-only valtio yjs

1pnpm install valtio-yjs-read-only valtio yjs

How to use it

1import * as Y from 'yjs';
2import { proxy } from 'valtio';
3import { bind } from 'valtio-yjs-read-only';
4
5// create a new Y doc
6const ydoc = new Y.Doc();
7
8// create a Y map
9const ymap = ydoc.getMap('mymap');
10
11// create a valtio state
12const state = proxy({});
13
14// bind them
15const unbind = bind(state, ymap);
16
17// mutate the Y map
18ymap.set('foo', 'bar');
19
20// state is reactive to any mutations to "ymap"
21console.log(state); // {foo: 'bar'}
22
23// unbind them by calling the result
24unbind();

Demos

Take a look at how we are doing at the Qwikens free Planning Poker.