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.