@render-props/subscriptions

0.1.11 • Public • Published

Subscriptions

A component for communicating changes to the state of one component to another component(s). This was much more useful before the React.createContext API in React 16.3 for ensuring context updates reached their consumers.

Installation

yarn add @render-props/subscriptions or npm i @render-props/subscriptions


Usage

import Subscriptions from '@render-props/subscriptions'

// Provides notifications to OtherComponent
class SomeComponent extends React.Component {
  componentDidUpdate () {
    this.props.notify(this.state)
  }
}

// Receives notifications from SomeComponent
class OtherComponent extends React.Component {
  componentDidMount () {
    this.props.subscribe(this.updateMyState)
  }

  componentWillMount () {
    this.props.unsubscribe(this.updateMyState)
  }
}

function MovablePoint (props) {
  return (
    <Subscriptions>
      {({subscribe, unsubscribe, notify}) => (
        <>
          <SomeComponent notify={notify}/>
          <OtherComponent subscribe={subscribe} unsubscribe={unsubscribe}/>
        </>
      )}
    </Point>
  )
}

Render Props

Methods

  • subscribe (callback <function>)
    • @callback receives notifications sent out with notify()
  • unsubscribe (x <number>)
    • @callback stops receiving notifications sent out with notify()
  • notify (...values <any>)
    • sends out a notification to all subscribers of this component with the exact values in @values

Package Sidebar

Install

npm i @render-props/subscriptions

Weekly Downloads

1

Version

0.1.11

License

MIT

Unpacked Size

7.19 kB

Total Files

13

Last publish

Collaborators

  • jaredlunde