@stanlemon/react-pouchdb
v0.6.4
Published
React components for interacting with PouchDB.
Downloads
408
Readme
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
Typescript
If you use Typescript you may run into an issue with the PouchDB types conflicting with the Node types. You can fix this by adding the following to your package.json to override @types/pouchdb-core
where the problem exists.
{
"devDependencies": {
"@types/pouchdb": "^6.4.2",
"@types/debug": "^4.1.12"
},
"overrides": {
"@types/pouchdb-core": "npm:@stanlemon/types-pouchdb-core@^0.0.1"
}
}