Handle websocket events (pusher.com) in React, without the tears 😭.
Switch branches/tags
Nothing to show
Clone or download
fwostal
Latest commit 11588d9 Dec 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib feat/add-implementation Dec 4, 2018
scripts feat/change-test-setup Dec 4, 2018
tests feat/add-implementation Dec 4, 2018
.editorconfig initial commit Dec 4, 2018
.gitignore initial commit Dec 4, 2018
.npmignore initial commit Dec 4, 2018
.travis.yml Add coveralls Dec 4, 2018
LICENSE Initial commit Jul 17, 2017
README.md doc/add-support-link Dec 5, 2018
jest.config.js feat/change-test-setup Dec 4, 2018
package-lock.json 1.0.2 Dec 5, 2018
package.json feat/add-prepublish-script Dec 5, 2018
tsconfig.json feat/add-implementation Dec 4, 2018

README.md

logo

npm version Build Status Blazing Fast Coverage Status Dependencies License: MIT gzip size

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>
  1. 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

Support

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

paypal