So you've seen the light and accepted Callbags as the future of reactive front-end development, but you need to update a React component every time a callbag emits a new value?

👂 React Callbag Listener is the answer!

npm install --save react-callbag-listener

or

yarn add react-callbag-listener

You provide any number of callbags as props to 👂 React Callbag Listener, and the render function given as children will be rendered whenever any of them changes.

import CallbagListener from 'react-callbag-listener'

...

// foo$ and bar$ are callbag sources that will emit values
<CallbagListener foo={foo$} bar={bar$}>
  {({ foo, bar }) => (
    <div>
      <div>Foo value is: {foo}</div>
      <div>Bar value is: {bar}</div>
    </div>
  )}
</CallbagListener>

That's it. There are no other options or API to document. The object given to your render prop will have the same keys as you passed as callbag props.