Installations

npm install @react-hook/event

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Score

98.1

Supply Chain

97.2

Quality

75.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

15

Total

244

Closed

199

Merged

30

Issues

Open

21

Total

72

Closed

51

Releases

Unable to fetch releases

Contributors

27

View all 27 contributors

Languages

3

TypeScript

JavaScript

Shell

TypeScript (85.29%)

JavaScript (14.55%)

Shell (0.17%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

jaredLunde

Download Statistics

Total Downloads

26,351,531

Last Day

39,041

Last Week

39,041

Last Month

565,097

Last Year

9,089,629

GitHub Statistics

1,467 Stars

429 Commits

97 Forks

10 Watching

14 Branches

27 Contributors

Bundle Size

545.00 B

Minified

326.00 B

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

1.2.6

Package Id

@react-hook/event@1.2.6

Size

7.07 kB

Publised On

27 Oct 2021

Total Downloads

Cumulative downloads

Total Downloads

26,351,531

Last day

0%

39,041

Compared to previous day

Last week

-65.4%

39,041

Compared to previous week

Last month

-5.1%

565,097

Compared to previous month

Last year

19.1%

9,089,629

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

1

react

Dev Dependencies

19

@testing-library/jest-dom @testing-library/react @testing-library/react-hooks @testing-library/user-event @types/jest @types/react @types/react-dom babel-jest eslint eslint-config-lunde husky jest lint-staged lundle prettier react react-dom react-test-renderer typescript

Versions

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.

2

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

Branch-Protection

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

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-02-03

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

@react-hook/event

Installations

Developer Guide

Yes

CommonJS, ESM

Score

Pull Requests

15

244

199

30

Issues

21

72

51

Releases

Unable to fetch releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

545.00 B

326.00 B

Maintainers

Package Meta Information

Total Downloads

26,351,531

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

useEvent()

Quick Start

API

useEvent(target, type, listener)

LICENSE

10

10

5

2

0

0

0

0

0

0

2.7

/10

Other packages similar to @react-hook/event