TypeScript icon, indicating that this package has built-in type declarations

0.4.78 • Public • Published

React PouchDB Components

npm version

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 checking out the repository and doing:

npm install
npm run example

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.


If you want to see every change that comes from CouchDB you can set debug={true} on the <Database/> component and they will be logged out to the console. Do not do this in production!

Build & Test

To get started:

npm install

To build the library:

npm run build

To run the tests:

npm run test



Package Sidebar


npm i @stanlemon/react-pouchdb

Weekly Downloads






Unpacked Size

88.9 kB

Total Files


Last publish


  • stanlemon