react-interactive-hooks
is a collection of React hooks designed for easy and
efficient handling of DOM events with optional debouncing and throttling. It
aims to improve performance and user experience in React applications by
providing a straightforward way to manage event listeners.
- Seamless React Integration: Works smoothly with React 17 and React 18.
- Performance Optimization: Debounce and throttle event handlers to reduce unnecessary renders and function executions.
- Comprehensive Event Support: From mouse and keyboard events to touch and custom events, handle a wide array of interactions.
- Flexibility and Ease of Use: Simple API that can be easily integrated into any React component.
You can install react-interactive-hooks
using npm or yarn:
npm install react-interactive-hooks --save
Or:
yarn add react-interactive-hooks
Make sure you have React installed in your project, as this package uses React as a peer dependency.
react-interactive-hooks
provides hooks for various DOM events, including
click, scroll, mouse move, and more. Here are some examples to get you started:
Use useOnClick
to handle click events:
import React from 'react';
import { useOnClick } from 'react-interactive-hooks';
function App() {
useOnClick(() => console.log('Clicked!'));
return <div>Click anywhere on this page</div>;
}
Improve performance by debouncing scroll events with useOnScroll
:
import React from 'react';
import { useOnScroll } from 'react-interactive-hooks';
function ScrollComponent() {
useOnScroll(() => console.log('Scrolling...'), { debounceDelay: 200 });
return (
<div style={{ overflowY: 'scroll', height: '100vh' }}>Scroll down</div>
);
}
Throttle mouse move events to limit the number of handler calls:
import React from 'react';
import { useOnMouseMove } from 'react-interactive-hooks';
function MouseMoveComponent() {
useOnMouseMove(() => console.log('Mouse moving...'), {
throttleInterval: 100,
});
return <div>Move your mouse over this text</div>;
}
Handle custom events using useEventHandler
:
import React, { useEffect } from 'react';
import { useEventHandler } from 'react-interactive-hooks';
function CustomEventComponent() {
const customEventHandler = (event) =>
console.log('Custom event:', event.detail);
useEffect(() => {
window.addEventListener('customEvent', customEventHandler);
return () => {
window.removeEventListener('customEvent', customEventHandler);
};
}, []);
useEventHandler('customEvent', customEventHandler);
return <div>Custom event handling</div>;
}
Contributions are welcome! Please refer to the contributing guidelines for more information.
Found a bug or have a feature request? Please report it on the GitHub issue tracker.
react-interactive-hooks
is licensed under the MIT License. See the
LICENSE file
for more details.
Developed by Mohammed Alhomaidi. For more information and other projects, please visit my GitHub profile.