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

npm install valtio-yjs-read-only valtio yjs

yarn add valtio-yjs-read-only valtio yjs

pnpm install valtio-yjs-read-only valtio yjs

How to use it

import * 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();

Demos

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