npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@stanlemon/react-pouchdb

v0.6.4

Published

React components for interacting with PouchDB.

Downloads

408

Readme

React PouchDB Components

npm version

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"
  }
}