React wrapper for PouchDB that also subscribes to changes.
TodoMVC example.
import { PouchDB, Find } from "react-pouchdb";
<PouchDB name="dbname">
<Find
selector={{
name: { $gte: null }
}}
sort={["name"]}
render={({ db, docs }) => (
<ul>
{docs.map(doc => (
<li key={doc._id}>
{doc.name}
<button onClick={() => db.remove(doc)}>Remove</button>
</li>
))}
</ul>
)}
/>
</PouchDB>;Connect to a database.
name: string
maxListeners: number
Similar change requests are pooled, but you might still need to increase the number of maxListeners.
...rest: any
Other props are passed to PouchDB constructor as second argument.
<PouchDB name="dbname">
<App />
</PouchDB>Get document and listen to changes.
id: string
docId.
component
Component is rendered with props db, doc and exists, if the document is found and/or updated. If the document is deleted, component will unmount.
<Get id="mydoc" component={Title} />render: func
render function is called with props db, doc and exists, if the document is found and/or updated. If the document is deleted, component will unmount.
<Get id="mydoc" render={({ doc }) => <h1>{doc.title}</h1>} />children: func|element
Render whether the document exists or not. Function is called / element is cloned with props db, doc and exists.
<Get
id="mydoc"
children={({ doc, exists }) =>
exists ? <h1>{doc.title}</h1> : <h1>Not found</h1>
}
/>attachments: bool|string
Include document attachments. Set to "u8a" to get attachments as Uint8Arrays.
<Get
attachments
id="mydoc"
render={({ attachments, doc }) => (
<>
<h1>{doc.title}</h1>
<code>{attachments["att.txt"].data}</code>
</>
)}
/>...rest: any
Other props are passed to db.get method as second argument. Note that if you provide props other than attachments, ajax or binary, live changes are disabled.
Find documents and listen to changes.
selector: object
sort: array
limit: number
skip: number
See db.find.
component
render: func
children: func|element
Render methods will be passed db and docs props. db is the PouchDB instance.
<Find
selector={{
name: { $gte: null }
}}
sort={["name"]}
render={({ docs }) => (
<ul>{docs.map(doc => <li key={doc._id}>{doc.name}</li>)}</ul>
)}
/>Higher-order component for accessing the PouchDB instance anywhere in the <PouchDB> children. Note that for convenience <Get> and <Find> render methods will be passed the db prop as well.
import { withDB } from "react-pouchdb";
export default withDB(({ db, title }) => (
<button
onClick={() =>
db.post({
title
})
}
>
Add
</button>
));The package expects pouchdb to be available. If you use pouchdb-browser or pouchdb-node import from react-pouchdb/browser or react-pouchdb/node respectively.