All Projects → Terreii → use-pouchdb

Terreii / use-pouchdb

Licence: Apache-2.0 license
React Hooks for PouchDB

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to use-pouchdb

Couchdb Net
EF Core-like CouchDB experience for .NET!
Stars: ✭ 50 (+28.21%)
Mutual labels:  couchdb, pouchdb
Kivik
Kivik provides a common interface to CouchDB or CouchDB-like databases for Go and GopherJS.
Stars: ✭ 200 (+412.82%)
Mutual labels:  couchdb, pouchdb
Vue Pouch Db
Vue Pouch DB is a VueJS Plugin that binds PouchDB with Vue and keeps a synchronised state with the database. Has support for Mango queries which are processed locally within the VuePouchDB state.
Stars: ✭ 127 (+225.64%)
Mutual labels:  couchdb, pouchdb
react-pouchdb
React components for interacting with PouchDB.
Stars: ✭ 15 (-61.54%)
Mutual labels:  couchdb, pouchdb
offPIM
Decentralized, Offline-first, Personal Information Manager (PIM) using PouchDB/CouchDB. Includes task-, note-, and contact-management, as well as journaling.
Stars: ✭ 63 (+61.54%)
Mutual labels:  couchdb, pouchdb
Ionic-CouchDB-chat-app
Simple chat mobile app, like whatsApp lite version
Stars: ✭ 13 (-66.67%)
Mutual labels:  couchdb, pouchdb
Metadata.js
Library for building offline-first browser-based applications :: платформа автономных веб-приложений
Stars: ✭ 165 (+323.08%)
Mutual labels:  couchdb, pouchdb
Avancedb
An in-memory database based on the CouchDB REST API and containing the CouchDB Futon and Fauxton web sites
Stars: ✭ 161 (+312.82%)
Mutual labels:  couchdb, pouchdb
kanban-board-app
Kanban style task management board app
Stars: ✭ 118 (+202.56%)
Mutual labels:  couchdb, pouchdb
Rxdb
🔄 A client side, offline-first, reactive database for JavaScript Applications
Stars: ✭ 16,670 (+42643.59%)
Mutual labels:  couchdb, pouchdb
go-pouchdb
GopherJS bindings for PouchDB ⚠️ NOTICE ⚠️ this package has been superseded by https://github.com/go-kivik/kivik
Stars: ✭ 12 (-69.23%)
Mutual labels:  couchdb, pouchdb
ember-cli-blog
Tom Dale's blog example updated for the Ember CLI
Stars: ✭ 87 (+123.08%)
Mutual labels:  couchdb, pouchdb
framework
Solu Framework is a full featured, ORM-backed, isomorphic framework using RPython, Pouch/CouchDB and React.
Stars: ✭ 20 (-48.72%)
Mutual labels:  couchdb, pouchdb
Cht Core
The CHT Core Framework makes it faster to build responsive, offline-first digital health apps that equip health workers to provide better care in their communities. It is a central resource of the Community Health Toolkit.
Stars: ✭ 354 (+807.69%)
Mutual labels:  couchdb, pouchdb
couch-auth
Powerful authentication for APIs and apps using CouchDB (or Cloudant) with Node >= 14
Stars: ✭ 50 (+28.21%)
Mutual labels:  couchdb, pouchdb
Pouchdb
🐨 - PouchDB is a pocket-sized database.
Stars: ✭ 14,625 (+37400%)
Mutual labels:  couchdb, pouchdb
drummer
Offline-first drum machine
Stars: ✭ 19 (-51.28%)
Mutual labels:  couchdb, pouchdb
comdb
A PouchDB plugin that transparently encrypts and decrypts its data.
Stars: ✭ 36 (-7.69%)
Mutual labels:  couchdb, pouchdb
Nectus
A boilerplate Flask API for a Fullstack Project with some additional packages and configuration prebuilt. ⚙
Stars: ✭ 32 (-17.95%)
Mutual labels:  react-hooks
think
Instagram clone using React Native with funcional components, React Hooks, React Navigation 4x and Reactotron debugger
Stars: ✭ 20 (-48.72%)
Mutual labels:  react-hooks

usePouchDB

Build Status dependencies Status devDependencies Status peerDependencies Status semantic-release Known Vulnerabilities npm

React Hooks for PouchDB.

Overview

usePouchDB is a collection of React Hooks to access data in a PouchDB database from React components.

The goal of usePouchDB is to ease the use of PouchDB with React. Enabling developers to create offline first apps.

Quick-start

You can find the Getting Started docs here (or on GitHub).

These docs walk you through setting up PouchDB and usePouchDB. They give you also a quick introduction to PouchDB and Apache CouchDB. But PouchDB's Guides are recommended to learn PouchDB.

You can find a introduction to React here.

If you know what you're doing and only want to quick start, read on...

Installation

usePouchDB requires React 16.8.3 or later.

npm install use-pouchdb
# or
yarn add use-pouchdb

You'll also need to install PouchDB. There is also a special browser version:

npm install pouchdb-browser
# or
yarn add pouchdb-browser

To use the useView hook pouchdb-mapreduce must be installed and setup. If you use the pouchdb or pouchdb-browser packages, it is already setup.

npm install pouchdb-mapreduce
# or
yarn add pouchdb-mapreduce

For using the useFind hook pouchdb-find must be installed and setup.

npm install pouchdb-find
# or
yarn add pouchdb-find

Bind usePouchDB

usePouchDB exports a <Provider /> to make one or multiple PouchDB databases available to its components sub-tree.

import React from 'react'
import ReactDOM from 'react-dom'
import PouchDB from 'pouchdb-browser'

import { Provider } from 'use-pouchdb'

import App from './App'

const db = new PouchDB('local')

ReactDOM.render(
  <Provider pouchdb={db}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Hooks

All hooks are listed here.

  • usePouch - Access the database provided by <Provider />.
  • useDoc - Access a single document and subscribe to its changes. The hook version of db.get.
  • useAllDocs - Load multiple documents and subscribe to their changes. Or a range of docs by their ids. The hook version of db.allDocs.
  • useFind - Access a mango index and subscribe to it. Optionally create the index, if it doesn't exist. The hook version of db.createIndex and db.find combined.
  • useView - Access a view and subscribe to its changes. The hook version of db.query.

Example

Load a single document and display it. useDoc is the hook version of db.get, but it also subscribes to updates of that document and automatically loads the new version.

import React from 'react'
import { useDoc } from 'use-pouchdb'

export default function Post({ postId }) {
  const { doc, loading, error } = useDoc(postId)

  if (error && !loading) {
    return <div>something went wrong: {error.name}</div>
  }

  if (doc == null && loading) {
    return null
  }

  return (
    <article>
      <div>
        <h3>{doc.author}</h3>
        <p>{doc.text}</p>
      </div>
    </article>
  )
}

Changelog

usePouchDB follows semantic versioning. To see a changelog with all usePouchDB releases, check out the Github releases page.

Contributing

Contributions in all forms are welcomed. ♡

If you have questions, Contributing.md might answer your questions.

To create a welcoming project to all, this project uses and enforces a Code of Conduct.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].