Getting Started

Install

React Hooks

npm install replicache replicache-react

JavaScript

npm install replicache

Serve Wasm Module

Replicache uses Wasm internally. Most bundlers don't deal with this well yet, so it's easiest to just serve it as a static asset.

Copy the Replicache Wasm module to your static assets directory:

cp node_modules/replicache/out/*.wasm public/

note

You should add a postinstall script to do this in your app, so that it will stay up to date when you update Replicache.

Client Setup

React Hooks

import {Replicache} from 'replicache';import {useSubscribe} from 'replicache';import {nanoid} from 'nanoid';
const rep = new Replicache({  // Put the correct path to replicache.wasm.br on your server here.  wasmModule: '/replicache.wasm',
  mutators: {    createTodo: (tx, args) => {      tx.put(`/todo/${args.id}`, args);    },  },});
function MyComponent() {  const todos = useSubscribe(    rep,    tx => tx.scan({prefix: '/todo/'}).toArray(),    [],  );
  const handleClick = () => {    rep.mutate.createTodo({      id: nanoid(),      order: todos.length,      text: 'new todo!',    });  };
  // ...}

JavaScript

import {Replicache} from 'replicache';import {nanoid} from 'nanoid';
const rep = new Replicache({  // Put the correct path to replicache.wasm[.br] on your server here.  wasmModule: '/replicache.wasm',
  mutators: {    createTodo: (tx, args) => {      tx.put(`/todo/${args.id}`, args);    },  },});
rep.subscribe(tx => tx.scan().toArray(), {  onData: data => console.log('got todos', data),});
rep.mutate.createTodo({  id: nanoid(),  title: 'Pick up milk',  order: 3,});

Server Setup

In order to sync, you will need to implement push an pull endpoints on your server.

For detailed information, see the integration guide, or the push/pull reference docs.