react-callbag-listener icon indicating copy to clipboard operation
react-callbag-listener copied to clipboard

👂 A React render-prop component that listens to values emitted by callbags

👂 React Callbag Listener

NPM Downloads Build Status codecov.io


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!


Demo 👀

Edit 👂 React Callbag Listener Demo


Installation

npm install --save react-callbag-listener

or

yarn add react-callbag-listener

How it works

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.