Skip to content
React Hook for DOM event listeners with TypeScript supported
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
src
.babelrc
.commitlintrc.yml
.editorconfig
.eslintrc.yml
.gitattributes
.gitignore
.gitignore-sync
.huskyrc.yml
.importsortrc.js
.jestrc.json
.lintstagedrc.yml
.markdownlint.json
.prettierrc.js
.renovaterc.json
.size-limit.json
CHANGELOG.md
LICENSE
README.md
package.json
rollup.config.ts
tsconfig.json
tsconfig.typecheck.json
yarn.lock

README.md

use-typed-event-listener

Build Status codecov.io

node npm npm

use-typed-event-listener is a React Hook for DOM event listeners with TypeScript supported

With TypeScript helps, this package can detect which event type the element supports, and automatically cast a correct typing for event

Installation

npm install use-typed-event-listener
# or
yarn add use-typed-event-listener

Interface

useEventListener(element, eventType, listener[, options])

Usage

  • listener typings will be automatically casted based on element and eventType

    import useEventListener from 'use-typed-event-listener'
    
    export default (props: Props) => {
        // typings for `event` will be `MouseEvent` as this package recognizes the `click` event type
        useEventListener(window, 'click', event => {
            console.log(event.buttons)
        })
    
        return <SomeComponent />
    }
  • No need to avoid passing new reference to listener or options, they are memorized and will not trigger the hook again

    import useEventListener from 'use-typed-event-listener'
    
    export default (props: Props) => {
        // this hook will only run once
        useEventListener(window, 'click', event => {}, {
            capture: true,
        })
    
        return <SomeComponent />
    }
  • Prevent casting eventType as string

    import useEventListener from 'use-typed-event-listener'
    
    export default (props: Props) => {
        const eventType: string = 'click'
    
        useEventListener(window, eventType, event => {
            // as `eventType` is a wild card string, `event` will fallback to general `Event` type
            // this line will throw `Property 'buttons' does not exist on type 'Event'.ts(2339)`
            console.log(event.buttons)
        })
    
        return <SomeComponent />
    }
  • Checks if element support this event type

    import useEventListener from 'use-typed-event-listener'
    
    export default (props: Props) => {
        // this pass as HTMLElement supports copy event
        useEventListener(document.body, 'copy', event => {
            console.log(event.clipboardData)
        })
    
        // as Window doesn't support copy event
        useEventListener(window, 'copy', event => {
            // this throws `Property 'clipboardData' does not exist on type 'Event'.ts(2339)`
            console.log(event.clipboardData)
        })
    
        return <SomeComponent />
    }
You can’t perform that action at this time.