react-pusher-hoc
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

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

Package Sidebar

Install

npm i react-pusher-hoc

Weekly Downloads

230

Version

1.0.7

License

MIT

Unpacked Size

11.5 kB

Total Files

6

Last publish

Collaborators

  • felixwostal