Skip to content
React components for interacting with PouchDB.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React PouchDB Components

React components for interacting with PouchDB documents. These components can be used to wrap parts of an application and both load and save state to a document. These components can be used both with React and React Native.

These components have been written in typescript.

Getting Started

Simply run:

npm install --save @stanlemon/react-pouchdb pouchdb

...and profit!


Check out the example app, which creates several different counters using different forms of the <Document /> component.

You can run the app by doing:

cd ./example/
npm install
npm start

PouchDB Components

Several components for making PouchDB easy to use are included.

To beging using, start with the <Database /> component which must be used at the highest level you wish to use PouchDB at.

<Database database="local" remote="">

Any component can be wrapped in a <Document /> which loads data from a PouchDB document, receives changes if that local PouchDB instance is syncing from a remote CouchDB instance, and provides a putDocument() method that can be used in place of setState() under most circumstances.

Using a higher order function:

import { Counter } from "./Counter";
const WrappedCounter = withDocument("counter", Counter);
<WrappedCounter />

Using the component and wrapping children:

import { Counter } from "./Counter";
<Document id="counter" loading={<div>Loading...</div>}>
  <Counter />

Using the component with the 'component' property

import { Counter } from "./Counter";
<Document id="counter" component={<Counter />} />

If you want to get the PouchDB instance as a db property on a component, simply wrap it in <Aware/>. This can be nested anywhere in your tree so long as at the top level you have a <Database /> component.

    <h1>You could put a component here that will get the "db" property.</h1>

Syncing to a Remote Database

The <PouchDb.Database> component has an attribute called remote that can be either a PouchDB instance or a valid URL for a CouchBD compatible database instance. Change detection is managed centrally in a single set of listeners and state is updated in components in real time. You can specify an onConflict() handler on the <Document/> component to deal with conflicts if they arise. A default handler that performs a blind merge is offered by default.

If you want a quick and easy way to test this out, install pouchdb-server and run it.

Install pouchdb-server:

npm install -g pouchdb-server

Run pouchdb-server:

pouchdb-server -m

The -m attribute stores data in memory only, if you would rather use sql do npm install -g pouchdb-adapter-node-websql and then use the --sqlite argument when starting the pouchdb-server instance instead of -m.

Build & Test

To get started:

npm install

To build the library:

npm run build

To run the tests:

npm run test
You can’t perform that action at this time.