Installations

npm install @use-it/event-listener

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.17.0

NPM Version

6.14.13 Pull Requests

Open

16

Total

44

Closed

9

Merged

19

Issues

Open

5

Total

19

Closed

14

Releases

Unable to fetch releases

Languages

2

JavaScript

TypeScript

JavaScript (77.95%)

TypeScript (22.05%)

Developer

donavon

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

358 Stars

43 Commits

35 Forks

6 Watchers

22 Branches

7 Contributors

Updated on Jul 04, 2025

Maintainers

1

View All 7 Contributors

Package Meta Information

Latest Version

0.1.7

Package Id

@use-it/event-listener@0.1.7

Unpacked Size

14.15 kB

Size

4.99 kB

File Count

10

NPM Version

6.14.13

Node Version

14.17.0

Published on

Nov 15, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

1

react

Dev Dependencies

16

@babel/core @babel/preset-env @babel/preset-react @testing-library/jest-dom @testing-library/react-hooks babel-core babel-jest eslint eslint-config-amex jest microbundle react react-dom react-test-renderer rimraf typescript

@use-it/event-listener

A custom React Hook that provides a declarative useEventListener.

This hook was inspired by Dan Abramov's blog post "Making setInterval Declarative with React Hooks".

I needed a way to simplify the plumbing around adding and removing an event listener in a custom hook. That lead to a chain of tweets between Dan and myself.

Installation

1$ npm i @use-it/event-listener

or

1$ yarn add @use-it/event-listener

Usage

Here is a basic setup.

1useEventListener(eventName, handler, element, options);

Parameters

Here are the parameters that you can use. (* = optional)

Parameter	Description
`eventName`	The event name (string). Here is a list of common events.
`handler`	A function that will be called whenever `eventName` fires on `element`.
`element`*	An optional element to listen on. Defaults to `global` (i.e., `window`).
`options`*	An object `{ capture?: boolean, passive?: boolean, once?: boolean }` to be passed to `addEventListener`. For advanced use cases. See MDN for details.

Return

This hook returns nothing.

Example

Let's look at some sample code. Suppose you would like to track the mouse position. You could subscribe to mouse move events with like this.

1const useMouseMove = () => {
2  const [coords, setCoords] = useState([0, 0]);
3
4  useEffect(() => {
5    const handler = ({ clientX, clientY }) => {
6      setCoords([clientX, clientY]);
7    };
8    window.addEventListener('mousemove', handler);
9    return () => {
10      window.removeEventListener('mousemove', handler);
11    };
12  }, []);
13
14  return coords;
15};

Here we're using useEffect to roll our own handler add/remove event listener.

useEventListener abstracts this away. You only need to care about the event name and the handler function.

1const useMouseMove = () => {
2  const [coords, setCoords] = useState([0, 0]);
3
4  useEventListener('mousemove', ({ clientX, clientY }) => {
5    setCoords([clientX, clientY]);
6  });
7
8  return coords;
9};

Live demo

You can view/edit the sample code above on CodeSandbox.

License

MIT Licensed

Contributors

Thanks goes to these wonderful people (emoji key):

_{Donavon West}
???? ⚠️ ???? ???? ???? ???? ???? ????

_{Kevin Kipp}
????

_{Justin Hall}
???? ????

_{Jeow Li Huan}
????

_{Norman Rzepka}
????

_{Beer van der Drift}
⚠️ ????

_clingsoft
????

This project follows the all-contributors specification. Contributions of any kind welcome!

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @use-it/event-listener

Other packages similar to @use-it/event-listener

@use-it/event-listener

Installations

Developer Guide

Yes

CommonJS

14.17.0

6.14.13

Pull Requests

16

44

9

19

Issues

5

19

14

Releases

Unable to fetch releases

Languages

Developer

donavon

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

@use-it/event-listener

Installation

Usage

Parameters

Return

Example

Live demo

License

Contributors

10

10

2

0

0

0

0

0

0

2.3

/10