Ninjas Practicing Multidimensionality

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

    0.4.18 • 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 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


    npm i @stanlemon/react-pouchdb

    DownloadsWeekly Downloads






    Unpacked Size

    82.4 kB

    Total Files


    Last publish


    • stanlemon