@stanlemon/react-pouchdb

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!

Example

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="http://127.0.0.1:5984/test">
  <h1>Database</h1>
</Database>

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 />
</Document>

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.

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

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.

Debug

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