Skip to content

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

License

Notifications You must be signed in to change notification settings

fel1xw/react-pusher-hoc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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