README
pouchdb-connect
PouchDB Connect for React
Features
- Global state for your React app stored in PouchDB
- No dependencies
- Not Redux! No provider, no reducers, no immutable store, no dispatching actions, no middleware, async-friendly
Install
npm i pouchdb-connect
Usage
import React from 'react'
import PouchDB from 'pouchdb'
import connect from 'pouchdb-connect'
const db = new PouchDB('books')
const withDb = connect(db)
function Book({ id, title, price }) {
return <div>{title} {price}</div>
}
// get the book from the db
async function getData({ id }) {
return db.get(id).catch(console.log)
}
// re-render only when this specific book has been modified
function shouldUpdate(changeEvent, { id }) {
return changeEvent.affects({ _id: id })
}
export default withDb(getData, shouldUpdate)(Book)
<Book id='1' />
API
connect( db )( getData, shouldUpdate )( MyComponent )
Creates a higher-order component that subscribes your component to db changes and conditionally re-renders the component.
db
The PouchDB object
getData( props )
This async function must return an object which will be assigned into the component's props
to re-render the component.
props
{object} - the currentprops
of the component
shouldUpdate( changeEvent, props )
This function is called after every change to the db. If the function returns true
, then the component will call getData()
, assign the data to props
, then re-render.
changeEvent
{object} - the PouchDB change event which is decorated with a few helpful properties:changeEvent.isInsert
{boolean} indicates if a new document was just createdchangeEvent.affects( selector )
{function} returns a boolean to indicate if the db change has affected the results of the given selectorselector
{object} see mango query selectors
props
{object} - the currentprops
of the component
MyComponent
Any React Component