0.6.0 • Published 1 year ago

valtio-yjs v0.6.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

valtio-yjs 💊🚀

CI npm size discord

valtio-yjs makes yjs state 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.

Project status

It started as an experiment, and the experiment is finished. Now, it's in alpha. We encourage developers to try it in non-trivial apps, and find bugs.

Install

yarn add valtio-yjs valtio yjs

How to use it

import * as Y from 'yjs';
import { proxy } from 'valtio';
import { bind } from 'valtio-yjs';

// 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);

// now you can mutate the state
state.text = 'hello';

// you can nest objects
state.obj = { count: 0 };

// and mutate the nested object value
++state.obj.count;

// you can use arrays too
state.arr = [1, 2, 3];

// mutating the array is also possible
state.arr.push(4);

// unbind them by calling the result
unbind();

Demos

Using useSnapshot in valtio and WebsocketProvider in y-websocket, we can create multi-client React apps pretty easily.

0.6.0

1 year ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.1

2 years ago

0.4.0

3 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.7

4 years ago

0.3.1

3 years ago

0.1.4

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago

0.0.0

4 years ago