Skip to content

React hook for handling window events, by exposing simple API, you just register a callback that you want to call on window event and the hook takes over, it also cleans up after itself, so you dont have to worry abo ut unsubscribing event handlers

Notifications You must be signed in to change notification settings

cool-hooks/react-use-window-events

 
 

Repository files navigation

React useWindowEvents

Description

React hook for handling window events, by exposing simple API, you just register a callback that you want to call on window event and the hook takes over, it also cleans up after itself, so you dont have to worry about unsubscribing event handlers

Installation

npm install react-use-window-events

About

The library exposes simple API, you just register a callback that you want to fire every time the event from provided event list fires, that callback is then attached as a listener these window events. You don't have to worry about cleaning up after yourself that is all done under the hood when the component that consumes this hook unmounts

 useWindowEvents: (
   events: string[],
   callback:EventListenerOrEventListenerObject
 ) => void

Usage

import React, { useEffect } from 'react'
import { useWindowEvents } from 'react-use-window-events'

import { handleWindowsResize } from '...'

const App = () => {

  useEffect(() => {
    useWindowEvents(['resize'], handleWindowsResize);
  }, [])

  return (
    <div>
      App content goes here
    </div>
  )
}
export default App;

Authors

Radovan Stevanovic

Aleksandar Ilic

License

MIT © rasha08

About

React hook for handling window events, by exposing simple API, you just register a callback that you want to call on window event and the hook takes over, it also cleans up after itself, so you dont have to worry abo ut unsubscribing event handlers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.1%
  • HTML 19.7%
  • TypeScript 19.5%
  • CSS 2.7%