@dot-event/react v1.6.11

@dot-event/react

React integration for dot-event.

Install

npm install --save @dot-event/store @dot-event/react

What it does

This integration provides a React context provider and consumer that passes the dot-event instance down to any component.

Higher order components

We add the provider and the consumer to your component chain via higher order component "composers". Most of the examples below walk you through using the composers.

Re-render on emit

Additionally, any dot-event emit triggers a forceRender() from the provider, leaving it to your child components' shouldComponentUpdate() function to decide whether they should render.

Provider composer

Create a provider composer (withEventsProvider.js):

import dotEvent from "dot-event"
import dotStore from "@dot-event/store"
import { withEventsProvider } from "@dot-event/react"

export default withEventsProvider(dotStore)

Add the consumer

Add the consumer and pass it to the provider composer:

import React from "react"
import { withEvents } from "@dot-event/react"
import withEventsProvider from "./withEventsProvider"

class Component extends React.Component {
  static async getInitialProps({ events }) {
    await events.set("message", "hello world")
  }
  render() {
    const { events } = this.props
    return events.get("message")
  }
}

export default withEventsProvider(withEvents(Component))

Read more about React context if you're not sure how the provider/consumer relationship works.