1.0.2 • Published 4 years ago
@aquestsrl/react-handlers v1.0.2
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.
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.6.0
4 years ago
0.5.2
4 years ago
0.5.0
4 years ago
0.5.1
4 years ago
0.4.0
4 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.6
6 years ago
0.2.5
6 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.0
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago