Create a provider and use HOC (Higher Order Components) to listen for Events in one place.
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>
);
}
}yarn add react-listener-provider
Since version 0.2.0 you'll also need "prop-types" as a peer dependency.
yarn add prop-types
none
listener: React.PropTypes.shape({
add: React.PropTypes.func.isRequired,
remove: React.PropTypes.func.isRequired
}).isRequired- clone this repo
yarncd demoyarn && yarn start
The repo structure as well as the inspiration to create this project come from react-perimiter.
Thanks to @aweary for the encouragement.