@custom-react-hooks/use-event-listener

useEventListener Hook

The useEventListener hook is a custom React hook that simplifies the process of adding and removing event listeners in your React components. It handles the lifecycle of the event listener, ensuring it is cleaned up when the component unmounts or dependencies change.

Installation

Installing Only Current Hooks

npm install @custom-react-hooks/use-event-listener

or

yarn add @custom-react-hooks/use-event-listener

Installing All Hooks

npm install @custom-react-hooks/all

or

yarn add @custom-react-hooks/all

Usage

Here's an example of how to use the useEventListener hook in a component:

import React, { useState, useRef } from 'react';
import useEventListener from '@custom-react-hooks/useEventListener';

const ExampleComponent: React.FC = () => {
  const [count, setCount] = useState(0);
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEventListener('click', () => setCount(count + 1), buttonRef);

  return (
    <div>
      <button ref={buttonRef}>Click Me</button>
      <p>Click count: {count}</p>
    </div>
  );
};

export default ExampleComponent;

In this component, useEventListener is used to listen for keydown events on the div element, and the state is updated with the last key pressed.

API Reference

Parameters

• eventName (string | string[]): The name of the event to listen to, or an array of event names.
• handler (function): The function to be called when the event is triggered.
• element (RefObject, optional): The ref object pointing to the DOM element to which the event listener will be attached. If not provided, the event listener will be attached to the window object.
• options (boolean | AddEventListenerOptions, optional): Options to pass to the event listener.
• condition (boolean, optional): A boolean value to conditionally attach or detach the event listener.

Notes

• Ensure the element referenced by element is mounted when the hook is called.
• The hook is versatile and can be used for various events and elements within a React application.

Contributing

Your contributions to the development and enhancement of this hook are welcome! Feel free to submit issues or pull requests to the repository.