Awesome Open Source
Awesome Open Source


MIT License CI Status npm

A higher-order component for connecting RxJS Observables to React components.


(Taken from WatermelonDB)

const Post = ({ post, comments }) => (
    { =>
      <EnhancedComment key={} comment={comment} />

const enhance = withObservables(['post'], ({ post }) => ({
  post: post.observe(),
  comments: post.comments.observe()

const EnhancedPost = enhance(Post)

➡️ Learn more: Connecting WatermelonDB to Components


yarn add @nozbe/with-observables

And then to use:

import withObservables from '@nozbe/with-observables'


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`.
// Example use:
//   withObservables(['task'], ({ task }) => ({
//     task: task,
//     comments: task.comments.observe()
//   }))


The TypeScript bindings expose a helper type, ObservableifyProps<Props, ObservableKeys, ObservableConvertibleKeys> which can make it easier to wrap components without duplicating interfaces:

interface Props {
  post: Post;
  author: Author;
  someOtherProp: boolean;
  anotherProp: number;

const PostRenderer: React.FC<Props> = (props) => ( ... );

type InputProps = ObservableifyProps<Props, "author", "post">
const enhance = withObservables(["post", "author"], ({ post }: InputProps) => ({
  author: author.observe()

export default enhance(PostRenderer);

Author and license

withObservables was created by @Nozbe for WatermelonDB.

withObservables is available under the MIT license. See the LICENSE file for more info.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (63,935
react (4,478
rxjs (143
observable (55
hoc (26

Find Open Source By Browsing 7,000 Topics Across 59 Categories