react-callbag-listener
react-callbag-listener copied to clipboard
👂 A React render-prop component that listens to values emitted by callbags
👂 React Callbag Listener
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 👀
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.