@link-hooks/use-event-listener

window add event listener

Install

npm install --save @link-hooks/use-event-listener

Usage

import React, { Component } from 'react'
import useEventListener from '@link-hooks/use-event-listener'

const Example = () => {
  const [hover, setHover] = useState(false)
  //  example-1
  const ref = useEventListener<HTMLDivElement>(
    ['mouseover', 'mouseleave'],
    [() => setHover(true), () => setHover(false)]
  )

  //  example-2
  // const ref = useEventListener<HTMLDivElement>(['mouseover', 'mouseleave'], {
  //   mouseover: () => setHover(true),
  //   mouseleave: () => setHover(false)
  // })

  //  example-3
  // const ref = useEventListener<HTMLDivElement>('mouseover', ) => setHover(true))

  return <div className={`box ${hover ? 'hover' : ''}`} ref={ref} />
}

License

MIT © xiguan00yu