🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-use-listener

Package Overview
Dependencies
Maintainers
0
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-use-listener

Demo [CodeSandbox](https://codesandbox.io/s/wonderful-franklin-zpck1)

1.0.3
latest
Source
npm
Version published
Weekly downloads
413
8.12%
Maintainers
0
Weekly downloads
 
Created
Source

Demo CodeSandbox

useListener

A powerful and flexible React hook for attaching and managing event listeners on DOM elements with built-in support for debouncing and throttling.

🚀 Features

  • Declarative event listener management
  • Supports debouncing and throttling
  • Works with refs and direct DOM elements
  • Automatic cleanup to prevent memory leaks
  • Flexible options: capture, passive, once

📦 Installation

npm install react-use-listener

or

yarn add react-use-listener

🔧 Usage

Basic Example

import { useRef } from "react";
import { useListener } from "react-use-listener";

function App() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  useListener(buttonRef, "click", () => {
    console.log("Button clicked!");
  });

  return <button ref={buttonRef}>Click Me</button>;
}

Using Debounce and Throttle

import { useListener } from "react-use-listener";

function SearchBox() {
  useListener(
    window,
    "resize",
    () => {
      console.log("Resized!");
    },
    { throttle: 200 }
  );

  return <input type="text" placeholder="Search..." />;
}

📜 API Reference

useListener

useListener(el, event, callback, options);

Parameters:

ParameterTypeDescription
elEventTargetTarget element or a React ref
eventstringEvent name (e.g., click, keydown)
callback(...args: any[]) => voidFunction to execute when event fires
optionsOptions (optional)Additional settings (see below)

Options:

OptionTypeDefaultDescription
debouncenumberundefinedDelay execution after inactivity (ms)
throttlenumberundefinedLimit execution rate (ms)
enabledbooleantrueEnable or disable the event listener
oncebooleanfalseRemove listener after the first execution
capturebooleanfalseUse event capturing instead of bubbling
passivebooleanfalseOptimize performance by preventing preventDefault()

🎯 Best Practices

  • Use refs for dynamically created elements to ensure proper listener management.
  • Use enabled: false when the listener is not needed to avoid unnecessary event bindings.
  • Prefer throttle for performance-sensitive events like scroll and resize.
  • Prefer debounce for user input events like keyup and search.

🛠 Contributing

  • Clone the repository:
    git clone https://github.com/md-adil/use-listener.git
    
  • Install dependencies:
    cd use-listener
    npm install
    
  • Run tests:
    npm test
    

📄 License

MIT License. See LICENSE for details.

Keywords

react hook

FAQs

Package last updated on 13 Feb 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts