Getting Started

Install#

React Hooks
JavaScript

npm add replicache replicache-react-util

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
JavaScript

import {Replicache} from 'replicache';
import {useSubscribe} from 'replicache-react-util';

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: Math.random().toString(32).substr(2),
      order: todos.length,
      text: 'new todo!',
    });
  };

  // ...
}

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.