Binding function withBus between React and Suber.

Usage

Install:

yarn add react-suber
# or
npm install react-suber --save

Usage:

import React from 'react'
import ReactDOM from 'react-dom'
import { withBus } from 'react-suber'

// Create a component that will listen on the 'SHOW_WARNING' channel
// It expects 'bus' as a prop
class WarningBanner extends React.Component {
  constructor () {
    super()
    this.state = {
      warning: null
    }
  }
  componentDidMount() {
    // Start listening for events on component mount
    // When something arrives, set component state to the warning message
    this.stop = this.props.bus.take('SHOW_WARNING', (msg) => {
      this.setState({ warning: msg.warning })
    })
  }
  componentWillUnmount() {
    // Stop listening on unmount
    this.stop()
  }
  render () {
    // Show the warning (if present)
    if (!this.state.warning) return null
    return <blink>{ this.state.warning }</blink>
  }
}

// Create a component will can send on the 'SHOW_WARNING' channel
// when clicked. It expects 'bus' as a prop
const SenderButton = ({ bus, children }) => {
  const onClick = () => bus.send('SHOW_WARNING', { warning: 'Hacking detected!' })
  return <button onClick={ onClick }>{ children }</button>
}

// To automatically pass the bus to these components
// we wrap them with 'withBus'
const WarningBannerWithBus = withBus(WarningBanner)
const SenderButtonWithBus = withBus(SenderButton)

// We use these wrapped components just as we
// would with the original components
ReactDOM.render(
  <div>
    <WarningBannerWithBus />
    <SenderButtonWithBus>Click me!!!</SenderButtonWithBus>
  </div>
  , document.getElementById('app')
)

API

Functions

• withBus

withBus(component)

Returns the wrapped component with the bus prop injected.

Arguments

• component: Component React component. Can be PureComponent or regular Component

Returns a new React Component

Development setup

yarn
npm run dev