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.