Skip to content
Handle websocket events (pusher.com) in React, without the tears 😭.
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

fel1xw Merge pull request #8 from fel1xw/dependabot/npm_and_yarn/https-proxy…
…-agent-2.2.4

Bump https-proxy-agent from 2.2.1 to 2.2.4
Latest commit b91dc7a May 12, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
scripts
tests
.editorconfig
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json
yarn.lock

README.md

logo

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

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

You can’t perform that action at this time.