Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ReactTraining/react-broadcast
Reliably communicate state changes to deeply nested React elements
https://github.com/ReactTraining/react-broadcast
Last synced: 14 days ago
JSON representation
Reliably communicate state changes to deeply nested React elements
- Host: GitHub
- URL: https://github.com/ReactTraining/react-broadcast
- Owner: ReactTraining
- License: mit
- Created: 2016-09-29T04:31:12.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-11-20T03:30:26.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T15:35:08.601Z (15 days ago)
- Language: JavaScript
- Homepage:
- Size: 223 KB
- Stars: 1,318
- Watchers: 23
- Forks: 58
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - react-broadcast
README
# react-broadcast [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]
[build-badge]: https://img.shields.io/travis/ReactTraining/react-broadcast/master.svg?style=flat-square
[build]: https://travis-ci.org/ReactTraining/react-broadcast
[npm-badge]: https://img.shields.io/npm/v/react-broadcast.svg?style=flat-square
[npm]: https://www.npmjs.com/package/react-broadcast
[`react-broadcast`](https://www.npmjs.com/package/react-broadcast) provides a reliable way for React components to propagate state changes to their descendants deep in the component hierarchy, bypassing intermediaries who `return false` from [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate).
It was originally built to solve issues that arose from using [`react-router`](https://www.npmjs.com/package/react-router) together with [`react-redux`](https://www.npmjs.com/package/react-redux). The router needed a safe way to communicate state changes to ``s deep in the component hierarchy, but `react-redux` relies on `shouldComponentUpdate` for performance. `react-broadcast` allows the router to work seamlessly with Redux and any other component that uses `shouldComponentUpdate`.
**Please note:** As with anything that uses [context](https://reactjs.org/docs/context.html), this library is experimental. It may cease working in some future version of React. For now, it's a practical workaround for the router. If we discover some better way to do things in the future, rest assured we'll do our best to share what we learn.
## Installation
$ npm install --save react-broadcast
Then, use as you would anything else:
```js
// using ES6 modules
import { createContext } from "react-broadcast";
// using CommonJS modules
var createContext = require("react-broadcast").createContext;
```
The UMD build is also available on [unpkg](https://unpkg.com):
```html
```
You can find the library on `window.ReactBroadcast`.
## Usage
The following is a contrived example, but illustrates the basic functionality we're after:
```js
import React from "react";
import { createContext } from "react-broadcast";
const users = [{ name: "Michael Jackson" }, { name: "Ryan Florence" }];
const { Provider, Consumer } = createContext(users[0]);
class UpdateBlocker extends React.Component {
shouldComponentUpdate() {
// This is how you indicate to React's reconciler that you don't
// need to be updated. It's a great way to boost performance when
// you're sure (based on your props and state) that your render
// output will not change, but it makes it difficult for libraries
// to communicate changes down the hierarchy that you don't really
// know anything about.
return false;
}
render() {
return this.props.children;
}
}
class App extends React.Component {
state = {
currentUser: Provider.defaultValue
};
componentDidMount() {
// Randomly change the current user every 2 seconds.
setInterval(() => {
const index = Math.floor(Math.random() * users.length);
this.setState({ currentUser: users[index] });
}, 2000);
}
render() {
return (
{currentUser =>
The current user is {currentUser.name}
}
);
}
}
```
Enjoy!
## About
react-broadcast is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:[email protected])!