react-pusher-hoc
Version:
Higher-Order Component for handling incoming [pusher.com](https://pusher.com) events like a charm.
69 lines (53 loc) • 2.49 kB
Markdown
[](https://badge.fury.io/js/react-pusher-hoc)
[](https://travis-ci.org/fel1xw/react-pusher-hoc)
[](https://npm.im/react-pusher-hoc)
[](https://coveralls.io/github/fel1xw/react-pusher-hoc?branch=master)
[](https://david-dm.org/fel1xw/react-pusher-hoc.svg)
[](https://opensource.org/licenses/MIT)
[](https://unpkg.com/react-pusher-hoc@latest/dist/index.js)
[](https://snyk.io/test/github/fel1xw/react-pusher-hoc)
## Install
```sh
npm install react-pusher-hoc --save
# or
yarn add react-pusher-hoc
```
## Usage
1. To use react-pusher, you need to pass the [pusher](https://github.com/pusher/pusher-js) instance to the `PusherProvider` as following:
```js
import { PusherProvider } from 'react-pusher-hoc';
import Pusher from 'pusher-js';
const pusherClient = new Pusher({
<your_config>...
});
<PusherProvider value={pusherClient}>
<App />
</PusherProvider>
```
2. Then you can wrap your component with the HOC (where `itemChannel` is the channel name and `add` is the event name delimited by `.`):
```js
import withPusher from 'react-pusher-hoc';
const ItemList = ({ items }) => (
<ul>
{items.map(item => <span key={item}>{item}</span>)}
</ul>
);
const mapEventsToProps = {
mapPropsToValues: props => ({
items: [],
}),
events: {
'itemChannel.add': (item, state, props) => ({
items: state.items.concat(item),
}),
}
};
export default withPusher(mapEventsToProps)(ItemList);
```
You need to provide initialValues through the `mapPropsToValues` function.
## Author
* Felix Wostal [@felixwostal](https://twitter.com/felixwostal)
## Support
If you like the project and want to support my work, you can think about buy me a coffee :)
[](https://paypal.me/felixwostal/1)