npmpackage.info

Gathering detailed insights and metrics for @react-hook/event

Other packages similar to @react-hook/event

@chakra-ui/react-use-pan-event

2.1.0

React hook to track pan events

react-swipeable

7.0.2

React Swipe event handler hook

react-use-event-hook

0.9.6

Same as React's `useCallback`, but returns a stable reference.

use-latest-callback

0.2.4

React hook which returns the latest callback without changing the reference

Gathering detailed insights and metrics for @react-hook/event

@react-hook/event - 1.2.6 | npmpackage.info

@react-hook/event

↩ Strongly typed, concurrent mode-safe React hooks

1.2.6

1,514

MIT

TypeScript

2.4

Installations

npm install @react-hook/event

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Pull Requests

Open

15

Total

244

Closed

199

Merged

30

Issues

Open

22

Total

73

Closed

51

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

Shell

TypeScript (85.29%)

JavaScript (14.55%)

Shell (0.17%)

Developer

jaredLunde

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,514 Stars

429 Commits

96 Forks

9 Watchers

14 Branches

27 Contributors

Updated on Jul 09, 2025

Maintainers

View All 27 Contributors

Package Meta Information

Latest Version

1.2.6

Package Id

@react-hook/event@1.2.6

Size

7.07 kB

Published on

Oct 27, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

useEvent()

npm i @react-hook/event

A React hook for adding events to HTML elements. This hook cleans up your listeners automatically when it unmounts. You won't have to worry about wrapping your listener in a useCallback() because this hook makes sure your most recent callback is always invoked.

Quick Start

1import * as React from 'react'
2import useEvent from '@react-hook/event'
3
4// Logs an event each time target.current is clicked
5const Component = () => {
6  const target = useRef(null)
7  useEvent(target, 'click', (event) => console.log(event))
8  return <div ref={target} />
9}
10
11// Logs an event each time the `document` is clicked
12const useLogDocumentClick = () => {
13  useEvent(document, 'click', (event) => console.log(event))
14}
15
16// Logs an event each time the `window` is clicked
17const useLogWindowClick = () => {
18  useEvent(window, 'click', (event) => console.log(event))
19}
20
21// Logs an event each time element#foo` is clicked
22const useLogElementClick = () => {
23  useEvent(document.getElementById('foo'), 'click', (event) =>
24    console.log(event)
25  )
26}

API

useEvent(target, type, listener)

1const useEvent = <
2  // Also has Window, Document overloads
3  T extends HTMLElement = HTMLElement,
4  K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
5>(
6  target: React.RefObject<T> | T | Window | Document | null,
7  type: K,
8  listener: EventListener<K>,
9  cleanup?: (...args: any[]) => any
10)

Argument	Type	Required?	Description
target	`React.RefObject<T> \| T \| Window \| Document \| null`	Yes	The React ref, `window`, or `document` to add the event listener to
type	`keyof EventMap`	Yes	The type of event to listen for
listener	`(this: T, ev: EventMap[K]) => any`	Yes	The callback invoked when the event type fires
cleanup	`(...args: any[]) => any`	No	This callback will be invoked when the event unmounts. This is in addition to the automatic event listener cleanup that occurs. A common use case could be something like clearing a timeout.

LICENSE

MIT

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.

5

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

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

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.4

/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 @react-hook/event

Other packages similar to @react-hook/event

@react-hook/event

Installations

Developer Guide

Yes

CommonJS, ESM

Pull Requests

15

244

199

30

Issues

22

73

51

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

useEvent()

Quick Start

API

useEvent(target, type, listener)

LICENSE

10

10

5

0

0

0

0

0

0

0

2.4

/10