Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mauris/react-lh
📣 React Loud Hailer: message passing and state management for React
https://github.com/mauris/react-lh
components library message-passing nodejs npm npm-package react react-components reactjs reactjs-components state-management
Last synced: 4 months ago
JSON representation
📣 React Loud Hailer: message passing and state management for React
- Host: GitHub
- URL: https://github.com/mauris/react-lh
- Owner: mauris
- Created: 2019-04-19T07:05:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-09T23:23:23.000Z (over 4 years ago)
- Last Synced: 2024-10-03T06:58:23.198Z (4 months ago)
- Topics: components, library, message-passing, nodejs, npm, npm-package, react, react-components, reactjs, reactjs-components, state-management
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-lh
- Size: 169 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Loud Hailer `react-lh`
[](https://travis-ci.org/mauris/react-lh) [](https://david-dm.org/mauris/react-lh?type=peer) [](https://david-dm.org/mauris/react-lh) [](https://www.npmjs.com/package/react-lh) [](https://www.npmjs.com/package/react-lh)
Publish/subscribe implementation for efficient message passing between [React](https://reactjs.org/) components.
## Install
To install `react-lh` with your existing React app, run either:
$ npm install --save react-lh
or if using Yarn:
$ yarn add react-lh
## Usage
_Recommended_: [Example Todo App on JSFiddle](https://jsfiddle.net/mauris/bzwm9f0n/) - The Todo App example demonstrates how facilitate inter-component communications and enable decoupling between them.
The following examples uses the ECMA 9 features. If you wish to use it in CommonJS module system (i.e. in Node.js natively), you need to use `require()` like so:
```javascript
const reactlh = require('react-lh');
const loudHailer = reactlh.loudHailer;
```
or concisely as:
```javascript
const { loudHailer } = require('react-lh');
```
After installing `react-lh` to your React app, you need to wrap components that you wish to access the Loud Hailer API with the `loudHailer()` function like that:
```javascript
import React, { Component } from 'react';
import loudHailer from 'react-lh';
class MyComponent extends Component {
componentDidMount() {
const { channel } = this.props;
channel.on('SomeOtherActionOccurred', () => {
// a function that executes whenever the event
// "SomeOtherActionOccurred" is fired
});
}
renderButtonClickHandler() {
return () => {
const { channel } = this.props;
// fires the event "ButtonClicked"
channel.emit('ButtonClicked');
};
}
render() {
return Press me;
}
}
// wrap the component using Loud Hailer before exporting
export default loudHailer(MyComponent);
```
In the case of a function component:
```javascript
import React from 'react';
import loudHailer from 'react-lh';
function FuncComponent(props) {
const { channel } = props;
const buttonClickHandler = () => {
channel.emit('ButtonClicked');
};
return Press me;
}
// wrap the component using Loud Hailer before exporting
export default loudHailer(FuncComponent);
```
By default, the Loud Hailer API will be accessible through the `channel` props property. The property name can be changed by passing an option to Loud Hailer wrapper's second options argument like this:
```javascript
import React from 'react';
import loudHailer from 'react-lh';
function FuncComponent(props) {
// notice that "pipe" is used here
const { pipe } = props;
const buttonClickHandler = () => {
pipe.emit('ButtonClicked');
};
// ...
}
const options = {
property: 'pipe',
};
export default loudHailer(FuncComponent, options);
```
You can even further simplify your component as such:
```javascript
import React from 'react';
import loudHailer from 'react-lh';
export default loudHailer(({ channel }) => {
const buttonClickHandler = () => {
channel.emit('ButtonClicked');
};
return Press me;
});
```
### React Hooks
With the introduction of hooks in React 16.8 or later, you can use `react-lh`'s React Hooks:
- `useChannel`
- `useLoudHailer`
- `useOnEvent`
- `useOnceEvent`
```javascript
import React, { useState } from 'react';
import { useLoudHailer } from 'react-lh';
export default (props) => {
const [value, setValue] = useState('none');
useLoudHailer((channel) => {
channel.on('valueGiven', (newValue) => {
setValue(newValue);
});
}, []);
return {`The value given was: ${value}`};
};
```
Or more concisely using `useOnEvent`:
```javascript
import React, { useState } from 'react';
import { useOnEvent } from 'react-lh';
export default (props) => {
const [value, setValue] = useState('none');
useOnEvent(
'valueGiven',
(newValue) => {
setValue(newValue);
},
[]
);
return {`The value given was: ${value}`};
};
```
### Cross-Window Event Propagation
It is possible for events emitted by components on one window to be propagated to another window through React Loud Hailer. This is made possible by browsers' localStorage API implementation. To enable this feature, you need to wrap your top-most component (e.g. `App`) with the Loud Hailer CrossWindow component like this:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { CrossWindow } from 'react-lh';
import App from './App';
const channels = ['default'];
ReactDOM.render(
,
document.getElementById('root')
);
```
The `channels` property indicate which channels can be communicated across all the open windows of your website. The default channel namespace is `'default'`.