@hooooks/use-event-listener

A custom React Hook that provides a declarative useEventListener with native event binding.

原生事件绑定hook

Installation

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

or

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

Usage

Here is a basic setup.

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

Example

1import { useRef } from 'react'
2import useEventListener from '@hooooks/use-event-listener'
3
4function App ({ children }) {
5  const containerRef = useRef<HTMLElement>()
6  const scrollContentRef = useRef<HTMLElement>()
7
8  useEventListener(window, 'resize', () => {
9    console.log('resize')
10  })
11
12  useEventListener(document, 'visibilityChange', hidden => {
13    console.log('hidden', hidden)
14  }, false)
15
16  // Component Ref
17  useEventListener(containerRef, 'contextmenu', () => {
18    console.log('contextmenu')
19  })
20
21 // native event binding
22  useEventListener(scrollContentRef, 'scroll', () => {
23    // handle scroll
24    console.log('scroll')
25  }, {
26    passive: true
27  })
28
29  return (
30    <Container ref={containerRef}>
31      <div className='content' ref={scrollContentRef}>
32        {children}
33      </div>
34    </Container>
35  )
36}

Parameters

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

Parameter	Description
element	The element Window | Document | HTMLElement | Ref<HTMLElement | ReactInstance> to listen on.
eventName	The event name (string). Here is a list of common events.
handler	A function that will be called whenever eventName fires on .
options*	An object { capture?: boolean, passive?: boolean, once?: boolean } or boolean to be passed to addEventListener. Defaults to false For advanced use cases. See MDN for details.

License

MIT Licensed