freshy969/react-pusher-hoc

Handle websocket events (pusher.com) in React, without the tears 😭.

Install

npm install react-pusher-hoc --save
# or
yarn add react-pusher-hoc

Usage

1. To use react-pusher, you need to pass the pusher instance to the PusherProvider as following:

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 .):

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

Support

If you like the project and want to support my work, you can think about buy me a coffee :)