0.5.1 • Published 5 months ago
valtio-yjs v0.5.1
valtio-yjs 💊🚀
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.
- Messages object
- Messages array
- Minecraft + webrtc
- (...open a PR to add your demos)
0.5.1
5 months ago
0.5.0
1 year ago
0.4.1
1 year ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.7
2 years ago
0.3.1
2 years ago
0.1.4
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago
0.0.0
3 years ago