Skip to content

Commit

Permalink
Update README.md (#62)
Browse files Browse the repository at this point in the history
  • Loading branch information
aboodman authored Jan 22, 2024
1 parent 022c62c commit fadebda
Showing 1 changed file with 30 additions and 15 deletions.
45 changes: 30 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
<pre>npm i <a href="https://www.npmjs.com/package/replicache-react">replicache-react</a></pre>
<br />

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. <br />
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

### function useSubscribe

React hook that allows you monitor replicache changes

| Parameter | Type | Description |
| :-------- | :---------------------------------- | :------------------------------------------------------------------------------- |
| `rep` | Replicache | Replicache instance that is being monitored |
| `query` | (tx: ReadTransaction) => Promise<R> | Query that retrieves data to be watched |
| `def` | R | default value returned on first render _or_ whenever `query` returns `undefined` |
| `deps` | Array<any> = [] | 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<R>` | 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<any> = []` | 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

Expand All @@ -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 (
Expand All @@ -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`.

Expand Down

0 comments on commit fadebda

Please sign in to comment.