1.6.0 • Public • Published


MIT License CI Status npm

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


(Taken from WatermelonDB)

const Post = ({ post, comments }) => (
    {comments.map(comment =>
      <EnhancedComment key={comment.id} 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`.
// Errors are re-thrown in render(). Use React Error Boundary to catch them.
// 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);

Or you can let getObservables define your props for you:

import withObservables, {ExtractedObservables} from "@nozbe/with-observables"

const getObservables = ({ post }: { post: Post }}) => ({
  author: author.observe()

interface Props extends ExtractedObservables<ReturnType<typeof getObservables>> {
  someOtherProp: boolean;
  anotherProp: number;

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

export default withObservables(["post"], getObservables)(PostRenderer);

Author and license

withObservables was created by @Nozbe for WatermelonDB.

withObservables' main author and maintainer is Radek Pietruszewski (websitetwitterengineering posters)

See all contributors.

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

Package Sidebar


npm i @nozbe/with-observables

Weekly Downloads






Unpacked Size

52.4 kB

Total Files


Last publish


  • michalpopek
  • nozbe-user
  • tkapelak
  • kokusgr
  • rozpierog
  • jsamelak