
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-use-listener
Advanced tools
Demo [CodeSandbox](https://codesandbox.io/s/wonderful-franklin-zpck1)
Demo CodeSandbox
A powerful and flexible React hook for attaching and managing event listeners on DOM elements with built-in support for debouncing and throttling.
npm install react-use-listener
or
yarn add react-use-listener
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>;
}
import { useListener } from "react-use-listener";
function SearchBox() {
useListener(
window,
"resize",
() => {
console.log("Resized!");
},
{ throttle: 200 }
);
return <input type="text" placeholder="Search..." />;
}
useListener
useListener(el, event, callback, options);
Parameter | Type | Description |
---|---|---|
el | EventTarget | Target element or a React ref |
event | string | Event name (e.g., click , keydown ) |
callback | (...args: any[]) => void | Function to execute when event fires |
options | Options (optional) | Additional settings (see below) |
Option | Type | Default | Description |
---|---|---|---|
debounce | number | undefined | Delay execution after inactivity (ms) |
throttle | number | undefined | Limit execution rate (ms) |
enabled | boolean | true | Enable or disable the event listener |
once | boolean | false | Remove listener after the first execution |
capture | boolean | false | Use event capturing instead of bubbling |
passive | boolean | false | Optimize performance by preventing preventDefault() |
enabled: false
when the listener is not needed to avoid unnecessary event bindings.throttle
for performance-sensitive events like scroll
and resize
.debounce
for user input events like keyup
and search
.git clone https://github.com/md-adil/use-listener.git
cd use-listener
npm install
npm test
MIT License. See LICENSE for details.
FAQs
Demo [CodeSandbox](https://codesandbox.io/s/wonderful-franklin-zpck1)
The npm package react-use-listener receives a total of 341 weekly downloads. As such, react-use-listener popularity was classified as not popular.
We found that react-use-listener demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.