Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »


0.1.1 • Public • Published

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


npm i @stanlemon/react-pouchdb

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability