React Handlers

React Handlers provide a way to centralize this events in one unique listener:

• Resize
• Window Click
• RequestAnimationFrame

Installation

First, wrap your project with Handlers component

import Handlers from '@aquestsrl/react-handlers';

const renderComponent = () => (
	<Handlers>
		<MyApp />
	</Handlers>
);

Custom ticker example

import Handlers from '@aquestsrl/react-handlers';

const renderComponent = () => (
	<Handlers
		mountTicker={cb => TweenLite.ticker.addEventListener('tick', cb, null, true, 1)}
		unmountTicker={cb => TweenLite.ticker.removeEventListener('tick', cb, null, true, 1)}
	>
		<MyApp />
	</Handlers>
);

Then, there are two ways to connect React Handlers with your components:

First way: Consumer

import { Consumer } from '@aquestsrl/react-handlers';

export default () => (
	<Consumer>
		{({
			saveResizeHandler,
			removeResizeHandler,
		}) => (
			<MyComponent
				saveResizeHandler={saveResizeHandler}                                  removeResizeHandler={removeResizeHandler}
			/>
		)}
	</Consumer>
);

Second way: withHandlers

import { withHandlers } from '@aquestsrl/react-handlers';

const myComponent = ({
	saveResizeHandler,
	removeResizeHandler,
}) => (
	<MyComponent
		saveResizeHandler={saveResizeHandler}                                  removeResizeHandler={removeResizeHandler}
	/>
);
export default withHandlers(myComponent);

Usage

class MyComponent extends Component {
	componentDidMount() {
		this.props.saveResizeHandler(this.onResize);
		this.props.saveRafHandler(this.onRaf);
		this.props.saveWindowClick(this.onWindowClick);
	}
	componentWillUnmount() {
		this.props.removeResizeHandler(this.onResize);
		this.props.removeRafHandler(this.onRaf);
		this.props.removeWindowClick(this.onWindowClick);
	}
	onResize = (width,height) => {
		console.log('Called resize', width, height)
	}
	onRaf = () => {
		console.log('Called raf')
	}
	onWindowClick = () => {
		console.log('Called click on window')
	}
}

Usage with Preact

import Provider, { Consumer, withHandlers } from '@aquestsrl/react-handlers/dist/preact';

ℹ️ On development, React Handlers create a Redux Dev Tools Extension instance.