From fadebdac082b39a131e40913da5ef88cc38d47c2 Mon Sep 17 00:00:00 2001 From: Aaron Boodman Date: Sun, 21 Jan 2024 21:43:00 -1000 Subject: [PATCH] Update README.md (#62) --- README.md | 45 ++++++++++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 661b613..31f9bcb 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,7 @@
npm i replicache-react

-Build your UI using `subscribe()` (or `useSubscribe` in React). -Whenever the data in Replicache changes — either due to changes in this tab, another tab, or on the server — the affected UI automatically updates.
-Replicache only refires subscriptions when the query results have actually changed, eliminating wasteful re-renders. +Provides a `useSubscribe()` hook for React which wraps Replicache's `subscribe()` method. ## API @@ -16,12 +14,14 @@ Replicache only refires subscriptions when the query results have actually chang React hook that allows you monitor replicache changes -| Parameter | Type | Description | -| :-------- | :---------------------------------- | :------------------------------------------------------------------------------- | -| `rep` | Replicache | Replicache instance that is being monitored | -| `query` | (tx: ReadTransaction) => Promise | Query that retrieves data to be watched | -| `def` | R | default value returned on first render _or_ whenever `query` returns `undefined` | -| `deps` | Array = [] | OPTIONAL: list of dependencies, query will be rerun when any of these change | +| Parameter | Type | Description | +| :--------------- | :------------------------------------------ | :------------------------------------------------------------------------------- | +| `rep` | `Replicache` | Replicache instance that is being monitored | +| `query` | `(tx: ReadTransaction) => Promise` | Query that retrieves data to be watched | +| `options?` | `Object \| undefined` | Option bag containing the named arguments listed below ⬇️ | +| `.defaut?` | `R \| undefined = undefined` | Default value returned on first render _or_ whenever `query` returns `undefined` | +| `.dependencies?` | `Array = []` | List of dependencies, query will be rerun when any of these change | +| `.isEqual?` | `((a: R, b: R) => boolean) = jsonDeepEqual` | Compare two returned values. Used to know whether to refire subscription. | ## Usage @@ -31,13 +31,16 @@ example of `useSubscribe` in todo app that is watching a specific category const {category} = props; const todos = useSubscribe( replicache, - tx => - tx + tx => { + return tx .scan({prefix: `/todo/${category}`}) .values() - .toArray(), - [], - [category], + .toArray(); + }, + { + default: [], + dependencies: [category], + }, ); return ( @@ -51,7 +54,19 @@ return ( ## Changelog -### 0.4.0 +### 5.0.1 + +Change package to pure ESM. See See https://github.com/rocicorp/replicache-react/pull/61 for more information. + +### 5.0.0 + +Add support for custom `isEqual`. See https://github.com/rocicorp/replicache-react/pull/59 for more information. + +### 4.0.1 + +Removes `def` from default dependencies. This is how it was before 0.4.0. Including by default makes it very easy to accidentally trigger render loops. People can added it explicitly if they really want. + +### 4.0.0 This release changes the semantics of `def` slightly. In previous releases, `def` was returned only until `query` returned, then `useSubscribe` returns `query`'s result. Now, `def` is returned initially, but also if `query` returns `undefined`.