https://github.com/nozbe/withobservables
HOC (Higher-Order Component) for connecting RxJS Observables to React Components
https://github.com/nozbe/withobservables
hoc observable react rxjs
Last synced: about 1 year ago
JSON representation
HOC (Higher-Order Component) for connecting RxJS Observables to React Components
- Host: GitHub
- URL: https://github.com/nozbe/withobservables
- Owner: Nozbe
- License: mit
- Created: 2018-09-03T11:56:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-15T18:14:05.000Z (over 2 years ago)
- Last Synced: 2025-04-02T12:12:42.174Z (about 1 year ago)
- Topics: hoc, observable, react, rxjs
- Language: JavaScript
- Homepage: https://github.com/Nozbe/WatermelonDB
- Size: 1.24 MB
- Stars: 68
- Watchers: 9
- Forks: 26
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `withObservables`
A [higher-order component](https://reactjs.org/docs/higher-order-components.html) for connecting RxJS [Observables](https://github.com/ReactiveX/rxjs) to React components.
## ⚠️ Deprecation notice ⚠️
**`@nozbe/with-observables` as a standalone package is deprecated as of August 2023.**
It continues to live on as part of [WatermelonDB](https://github.com/Nozbe/WatermelonDB). If you use WatermelonDB 0.27 or later, use this import instead:
```js
`import { withObservables } from '@nozbe/watermelondb/react'`
```
## Example
(Taken from [WatermelonDB](https://github.com/Nozbe/WatermelonDB/))
```js
const Post = ({ post, comments }) => (
{post.name}
{post.body}
Comments
{comments.map(comment =>
)}
)
const enhance = withObservables(['post'], ({ post }) => ({
post: post.observe(),
comments: post.comments.observe()
}))
const EnhancedPost = enhance(Post)
```
**➡️ Learn more:** [Connecting WatermelonDB to Components](https://watermelondb.dev/docs/Components)
## Installation
```bash
yarn add @nozbe/with-observables
```
And then to use:
```js
import withObservables from '@nozbe/with-observables'
```
## Usage
```js
withObservables(triggerProps, getObservables)
// Injects new props to a component with values from the passed Observables
//
// Every time one of the `triggerProps` changes, `getObservables()` is called
// and the returned Observables are subscribed to.
//
// Every time one of the Observables emits a new value, the matching inner prop is updated.
//
// You can return multiple Observables in the function. You can also return arbitrary objects that have
// an `observe()` function that returns an Observable.
//
// The inner component will not render until all supplied Observables return their first values.
// If `triggerProps` change, renders will also be paused until the new Observables emit first values.
//
// If you only want to subscribe to Observables once (the Observables don't depend on outer props),
// pass `null` to `triggerProps`.
//
// Errors are re-thrown in render(). Use React Error Boundary to catch them.
//
// Example use:
// withObservables(['task'], ({ task }) => ({
// task: task,
// comments: task.comments.observe()
// }))
```
## Typescript
The TypeScript bindings expose a helper type, `ObservableifyProps` which can make it easier to wrap components without duplicating interfaces:
```ts
interface Props {
post: Post;
author: Author;
someOtherProp: boolean;
anotherProp: number;
}
const PostRenderer: React.FC = (props) => ( ... );
type InputProps = ObservableifyProps
const enhance = withObservables(["post", "author"], ({ post }: InputProps) => ({
post,
author: author.observe()
});
export default enhance(PostRenderer);
```
Or you can let `getObservables` define your props for you:
```tsx
import withObservables, {ExtractedObservables} from "@nozbe/with-observables"
const getObservables = ({ post }: { post: Post }}) => ({
post,
author: author.observe()
});
interface Props extends ExtractedObservables> {
someOtherProp: boolean;
anotherProp: number;
}
const PostRenderer: React.FC = (props) => (
<>{props.author.id}>
);
export default withObservables(["post"], getObservables)(PostRenderer);
```
## Author and license
**withObservables** was created by [@Nozbe](https://github.com/Nozbe) for [WatermelonDB](https://github.com/Nozbe/WatermelonDB).
**withObservables**' main author and maintainer is [Radek Pietruszewski](https://github.com/radex) ([website](https://radex.io) ⋅ [twitter](https://twitter.com/radexp) ⋅ [engineering posters](https://beamvalley.com))
[See all contributors](https://github.com/Nozbe/withObservables/graphs/contributors).
withObservables is available under the MIT license. See the [LICENSE](./LICENSE) file for more info.