use-event-listener's Introduction

@hooooks/use-event-listener

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

原生事件绑定hook

Installation

$ npm i @hooooks/use-event-listener

$ yarn add @hooooks/use-event-listener

Usage

Here is a basic setup.

useEventListener(element, eventName, handler, options);

Example

import { useRef } from 'react'
import useEventListener from '@hooooks/use-event-listener'

function App ({ children }) {
  const containerRef = useRef<HTMLElement>()
  const scrollContentRef = useRef<HTMLElement>()

  useEventListener(window, 'resize', () => {
    console.log('resize')
  })

  useEventListener(document, 'visibilityChange', hidden => {
    console.log('hidden', hidden)
  }, false)

  // Component Ref
  useEventListener(containerRef, 'contextmenu', () => {
    console.log('contextmenu')
  })

 // native event binding
  useEventListener(scrollContentRef, 'scroll', () => {
    // handle scroll
    console.log('scroll')
  }, {
    passive: true
  })

  return (
    <Container ref={containerRef}>
      <div className='content' ref={scrollContentRef}>
        {children}
      </div>
    </Container>
  )
}

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.