Package Exports

react-listener-provider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-listener-provider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-listener-provider

Create a provider and use HOC (Higher Order Components) to listen for Events in one place.

Usage Example

react-listener-provider exports a ReactListenerProvider component as well as a withListener() wrapper function.

Components wrapped with withListener() will have an added prop listener which exposes add() and remove() methods.

add() and remove() work just like window.addEventListener() and window.removeEventListener(), they take a type <string> argument and a callback <function> argument.

import React, { Component } from 'react';
import ReactListenerProvider, { withListener } from '../../src';

class MouseMove extends Component {
  state = { x: 0, y: 0 };

  componentDidMount() {
    const { add } = this.props.listener;
    add('mousemove', ({ clientX: x, clientY: y }) => this.setState({ x, y }));
  }

  componentWillUnmount() {
    const { remove } = this.props.listener;
    remove('mousemove', ({ clientX: x, clientY: y }) => this.setState({ x, y }));
  }

  render() {
    const { x, y } = this.state;
    return (
      <div>
        <span>x: {x}</span>
        <span> - </span>
        <span>y: {y}</span>
      </div>
    );
  }
}


const WrappedComponent = withListener(MouseMove);


class App extends Component {
  render() {
    return (
      <ReactListenerProvider>
        <WrappedComponent />
      </ReactListenerProvider>
    );
  }
}

Installation

yarn add react-listener-provider

Since version 0.2.0 you'll also need "prop-types" as a peer dependency.

yarn add prop-types

API

Props

ReactListenerProvider

none

Component wrapped with `withListener()`

listener: React.PropTypes.shape({
      add: React.PropTypes.func.isRequired,
      remove: React.PropTypes.func.isRequired
    }).isRequired

Development

clone this repo
yarn
cd demo
yarn && yarn start

Attribution

The repo structure as well as the inspiration to create this project come from react-perimiter.

Thanks to @aweary for the encouragement.