HOC (Higher-Order Component) for connecting RxJS Observables to React Components
Branch: master
Clone or download
radex Merge pull request #24 from Nozbe/greenkeeper/flow-bin-0.93.0
Update flow-bin to the latest version 🚀
Latest commit cda20a9 Feb 14, 2019

README.md

withObservables

MIT License CI Status npm

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

Example

(Taken from WatermelonDB)

const Post = ({ post, comments }) => (
  <article>
    <h1>{post.name}</h1>
    <p>{post.body}</p>
    <h2>Comments</h2>
    {comments.map(comment =>
      <EnhancedComment key={comment.id} comment={comment} />
    )}
  </article>
)

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

const EnhancedPost = enhance(Post)

➡️ Learn more: Connecting WatermelonDB to Components

Installation

yarn add @nozbe/with-observables

And then to use:

import withObservables from '@nozbe/with-observables'

Usage

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()
//   }))

Author and license

withObservables was created by @Nozbe for WatermelonDB.

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