valtio-yjs-read-only makes yjs states reading easy.
- 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.
Please, check the original valtio-yjs project.
We are following their versions and making them read only 🧐
npm install valtio-yjs-read-only valtio yjsyarn add valtio-yjs-read-only valtio yjspnpm install valtio-yjs-read-only valtio yjsimport * as Y from 'yjs';
import { proxy } from 'valtio';
import { bind } from 'valtio-yjs-read-only';
// create a new Y doc
const ydoc = new Y.Doc();
// create a Y map
const ymap = ydoc.getMap('mymap');
// create a valtio state
const state = proxy({});
// bind them
const unbind = bind(state, ymap);
// mutate the Y map
ymap.set('foo', 'bar');
// state is reactive to any mutations to "ymap"
console.log(state); // {foo: 'bar'}
// unbind them by calling the result
unbind();Take a look at how we are doing at the Qwikens free Planning Poker.