@stanlemon/react-pouchdb0.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.
npm install --save @stanlemon/react-pouchdb pouchdb
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 installnpm start
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 ="local" =""><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 = ;<WrappedCounter />
Using the component and wrapping children:
import Counter from "./Counter";<Document ="counter" =><Counter /></Document>
Using the component with the 'component' property
import Counter from "./Counter";<Document ="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
<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.
npm install -g pouchdb-server
-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
Build & Test
To get started:
To build the library:
npm run build
To run the tests:
npm run test