# @reactivedata/reactive-crdt
> Reactive CRDT is an easy-to-use library for building collaborative applications that sync automatically. It's built on top of Yjs, a proven, high performance CRDT implementation.
Latest version **0.2.10** (published 2021-11-10) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @reactivedata/reactive-crdt
pnpm add @reactivedata/reactive-crdt
yarn add @reactivedata/reactive-crdt
bun add @reactivedata/reactive-crdt
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.2.10 |
| Published | 2021-11-10 |
| First published | 2021-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 236.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yousefed |
| Keywords | reactive, crdt, yjs, react, sync, automerge, collaboration, collaborative, mobx, vue, vuejs, observable, operational transforms, conflict, offline, shared editing |
## Links
- npm: https://www.npmjs.com/package/@reactivedata/reactive-crdt
- npm.io page: https://npm.io/package/@reactivedata/reactive-crdt
## Dependencies (3)
- [@types/eslint](https://npm.io/package/@types/eslint.md) 6.8.0
- [@reactivedata/reactive](https://npm.io/package/@reactivedata/reactive.md) 0.1.16
- [@reactivedata/yjs-reactive-bindings](https://npm.io/package/@reactivedata/yjs-reactive-bindings.md) ^0.2.8
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.2.10 (latest) — 2021-11-10
- 0.2.9 — 2021-11-10
- 0.2.8 — 2021-11-10
- 0.2.7 — 2021-11-09
- 0.2.6 — 2021-11-09
- 0.2.5 — 2021-11-09
- 0.2.4 — 2021-11-08
- 0.2.3 — 2021-10-31
- 0.2.2 — 2021-10-31
- 0.2.0 — 2021-10-12
- 0.1.8 — 2021-07-12
- 0.1.7 — 2021-07-08
- 0.1.6 — 2021-06-08
- 0.1.5 — 2021-05-16
- 0.1.4 — 2021-05-07
- … 3 more at https://npm.io/package/@reactivedata/reactive-crdt/versions
## README
# Reactive CRDT
[](https://badge.fury.io/js/%40reactivedata%2Freactive-crdt) [](https://coveralls.io/github/YousefED/reactive-crdt?branch=main)
Reactive CRDT is an easy-to-use library for building collaborative applications that sync automatically. It's built on top of [Yjs](https://github.com/yjs/yjs), a proven, high performance CRDT implementation.
# Example
Have a look at the collaborative Todo list examples ([React](https://github.com/yousefED/reactive-crdt/tree/main/examples/todo-react), [Vue](https://github.com/yousefED/reactive-crdt/tree/main/examples/todo-vue)) to get up to speed. Or, read along for a quick overview.
[](https://github.com/yousefED/reactive-crdt/tree/main/examples/)
- Open live demo: [React](https://sm8tt.csb.app/) or [Vue](https://78oyq.csb.app/) (Of course, open multiple times to test multiplayer)
- Edit / view on Codesandbox [React](https://codesandbox.io/s/todo-react-sm8tt) / [Vue](https://codesandbox.io/s/todo-vue-78oyq)
Source in: [examples/todo-react](https://github.com/yousefED/reactive-crdt/tree/main/examples/todo-react) and [examples/todo-vue](https://github.com/yousefED/reactive-crdt/tree/main/examples/todo-vue).
# Quick overview
Setup:
```typescript
import { crdt, Y } from "@reactivedata/reactive-crdt";
import { WebrtcProvider } from "y-webrtc";
// Create a document that syncs automatically using Y-WebRTC
const doc = new Y.Doc();
const webrtcProvider = new WebrtcProvider("my-document-id", doc);
// (optional, define types for TypeScript)
type Vehicle = { color: string; type: string };
// Create your reactive-crdt store
export const store = crdt(doc, { vehicles: [] as Vehicle[] });
```
From now on, the `store` object is synced automatically:
User 1:
```typescript
store.vehicles.push({ type: "car", color: "red" });
```
User 2 (on a different device):
```typescript
console.log(store.vehicles.length); // Outputs: 1
```
# Reacting to updates
Now that State can be modified by connected peers, you probably want to observe changes and automatically display updates. This is easy to do, because Reactive CRDT works closely with the [Reactive library](https://www.github.com/yousefed/reactive).
Let's look at some examples:
## Using React
```typescript
import { useReactive } from "@reactivedata/react";
import { store } from "."; // the store we defined above
export default function App() {
const state = useReactive(store);
return (
Vehicles:
{state.vehicles
.map((v) => {
return
{v.type}
;
})}
{
if (event.key === "Enter") {
const target = event.target as HTMLInputElement;
// Add a yellow vehicle using the type added in the textfield
state.vehicles.push({ color: "yellow", type: target.value });
target.value = "";
}
})>
);
}
```
View on CodeSandbox (coming soon)
## Vue
Reactive CRDT works great with Vues reactive programming model. See the [Vue Todo example](https://github.com/yousefED/reactive-crdt/tree/main/examples/todo-vue) for an example application. In short, just put an object returned by the `crdt` function on a Vue `data()` object:
```typescript
import * as Vue from "vue";
import { crdt, Y, useVueBindings } from "@reactivedata/reactive-crdt";
import { WebrtcProvider } from "y-webrtc";
// make reactive-crdt use Vuejs internally
useVueBindings(Vue);
// Setup Yjs
const doc = new Y.Doc();
new WebrtcProvider("id", doc); // sync via webrtc
export default Vue.defineComponent({
data() {
return {
// synced with Reactive CRDT
sharedData: crdt<{
vehicles: Vehicle[];
}>(doc),
// untouched
regularLocalString: "",
}
}
);
```
You can now use `sharedData.vehicles` in your Vue app and it will sync automatically.
## Without framework
You don't have to use React or Vue, you can also use `autorun` from the Reactive library to observe changes:
```typescript
import { reactive, autorun } from "@reactivedata/reactive";
import { store } from "."; // the store we defined above
const reactiveStore = reactive(store);
autorun(() => {
reactiveStore.vehicles.forEach((v) => {
console.log(`A ${v.color} ${v.type}`);
});
});
// This can be executed on a different connected device:
reactiveStore.vehicles.push({ type: "bike", color: "red" });
reactiveStore.vehicles.push({ type: "bus", color: "green" });
```
View on CodeSandbox (coming soon)
# Motivation
Yjs is a very powerful CRDT, but it's API is mostly targeted to create high-performant data bindings for (rich text) editors.
I wanted to explore whether we can abstract the existing Yjs API away, and make it _extremely easy_ to integrate it as a Collaborative Data Store into existing applications.
There were two major design decisions:
- Instead of data types like Y.Map, and Y.Array, can we just use plain Javascript objects and arrays?
- e.g.: `store.outer.inner.property = value` instead of `doc.getMap("inner").getMap("outer").getMap("inner").get("value")`
- Instead of having to call `.observe` manually, can we integrate with a Reactive Functional Programming library to do this automatically?
- e.g.: wrap your code in `autorun` or use `useReactive` (React), or Vue's reactive model and automatically observe all used values from the store.
Would love to hear your feedback!
### Credits ❤️
Reactive CRDT builds directly on [Yjs](https://github.com/yjs/yjs) and [Reactive](https://www.github.com/yousefed/reactive). It's also inspired by and builds upon the amazing work by [MobX](https://mobx.js.org/) and [NX Observe](https://github.com/nx-js/observer-util).
---
_Source: https://npm.io/package/@reactivedata/reactive-crdt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._