All Projects β†’ erikras β†’ react-callbag-listener

erikras / react-callbag-listener

Licence: other
πŸ‘‚ A React render-prop component that listens to values emitted by callbags

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-callbag-listener

render-props
Easily and reliably support Render Props, Component Injection, and Function as a Child
Stars: ✭ 82 (+290.48%)
Mutual labels:  render-prop, render-props
callbag-rs
Rust implementation of the callbag spec for reactive/iterable programming
Stars: ✭ 25 (+19.05%)
Mutual labels:  observable, callbag
use-callbag
πŸ‘œ Use callbag as React hook.
Stars: ✭ 34 (+61.9%)
Mutual labels:  callbag, callbags
knockout-decorators
Decorators for use Knockout JS in TypeScript and ESNext environments
Stars: ✭ 45 (+114.29%)
Mutual labels:  observable
stickyard
Make your React component sticky the easy way
Stars: ✭ 83 (+295.24%)
Mutual labels:  render-props
Pharmacist
Builds observables from events.
Stars: ✭ 221 (+952.38%)
Mutual labels:  observable
realar
5 kB Advanced state manager for React
Stars: ✭ 41 (+95.24%)
Mutual labels:  observable
render-props
㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern
Stars: ✭ 33 (+57.14%)
Mutual labels:  render-props
rxrest
Reactive rest library
Stars: ✭ 33 (+57.14%)
Mutual labels:  observable
RxComponentLifecycle
Rx binding of new Android Architecture Component Lifecycle
Stars: ✭ 57 (+171.43%)
Mutual labels:  observable
vana
Observe your immutable state trees πŸŒ²πŸ‘€ (great with React)
Stars: ✭ 24 (+14.29%)
Mutual labels:  observable
redebounce
β†˜οΈ Render Props component to debounce the given value
Stars: ✭ 14 (-33.33%)
Mutual labels:  render-props
ng-observe
Angular reactivity streamlined...
Stars: ✭ 65 (+209.52%)
Mutual labels:  observable
reactive-box
1 kB effective reactive core
Stars: ✭ 19 (-9.52%)
Mutual labels:  observable
react-save-localstorage
πŸ—„ React component to save data to localStorage on render phase safely
Stars: ✭ 26 (+23.81%)
Mutual labels:  render-props
design-pattern
🌴 Detail design pattern and give many demos in Java.
Stars: ✭ 28 (+33.33%)
Mutual labels:  observable
awesome-callbags
Callbag Libraries & Learning Material https://github.com/callbag/callbag
Stars: ✭ 85 (+304.76%)
Mutual labels:  callbag
EventEmitter
Simple EventEmitter with multiple listeners
Stars: ✭ 19 (-9.52%)
Mutual labels:  observable
observable-profiler
Tracks new & disposed Observable subscriptions
Stars: ✭ 41 (+95.24%)
Mutual labels:  observable
windowed-observable
Messaging lib using a pub/sub observable scoped by namespaces.
Stars: ✭ 132 (+528.57%)
Mutual labels:  observable

πŸ‘‚ 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].