https://github.com/erikras/react-callbag-listener

👂 A React render-prop component that listens to values emitted by callbags
https://github.com/erikras/react-callbag-listener

callbag callbags observable react render-prop render-props

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/erikras/react-callbag-listener
• Owner: erikras
• Created: 2018-04-26T19:45:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-28T13:52:35.000Z (over 7 years ago)
• Last Synced: 2025-03-25T06:41:41.268Z (7 months ago)
• Topics: callbag, callbags, observable, react, render-prop, render-props
• Language: JavaScript
• Size: 523 KB
• Stars: 21
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 👂 React Callbag Listener

[![NPM Downloads](https://img.shields.io/npm/dm/react-callbag-listener.svg?style=flat)](https://www.npmjs.com/package/react-callbag-listener)

[![Build Status](https://travis-ci.org/erikras/react-callbag-listener.svg?branch=master)](https://travis-ci.org/erikras/react-callbag-listener)

[![codecov.io](https://codecov.io/gh/erikras/react-callbag-listener/branch/master/graph/badge.svg)](https://codecov.io/gh/erikras/react-callbag-listener)

---

So you've seen the light and accepted [Callbags](https://github.com/callbag/callbag) 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4y2z5j6v7)

---

## Installation

```bash

npm install --save react-callbag-listener

```

or

```bash

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.

```jsx

import CallbagListener from 'react-callbag-listener'

...

// foo$ and bar$ are callbag sources that will emit values

  {({ foo, bar }) => (

    


      
Foo value is: {foo}

      
Bar value is: {bar}

    

  )}


```

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.