use-window-event

Adds event listener to the window object on component mount and removes the event when the component unmounts

Source

View source code

Docs

Edit this page

PackageIcon

@mantine/hooks

Usage

The use-window-event hook adds an event listener to the window object on component mount and removes it on unmount:

import { useEffect } from 'react';
import { useWindowEvent } from '@mantine/hooks';

const handler = (event: KeyboardEvent) => console.log(event);

// regular way
useEffect(() => {
  window.addEventListener('keydown', handler);
  return () => window.removeEventListener('keydown', handler);
}, []);

// with use-window-event hook
useWindowEvent('keydown', handler);

Example

Search focus with ⌘ + K on macOS or Ctrl + K on Windows and Linux on the Mantine docs website:

import { useRef } from 'react';
import { useWindowEvent } from '@mantine/hooks';

function Demo() {
  const inputRef = useRef<HTMLInputElement>(null);

  useWindowEvent('keydown', (event) => {
    if (event.code === 'KeyK' && (event.ctrlKey || event.metaKey)) {
      event.preventDefault();
      inputRef.current?.focus();
    }
  });

  return <input ref={inputRef} />;
}

Definition

The hook has the same definition as window.addEventListener function:

function useWindowEvent<K extends keyof WindowEventMap>(
  type: K,
  listener: (this: Window, ev: WindowEventMap[K]) => any,
  options?: boolean | AddEventListenerOptions
): void;

use-viewport-size

use-window-scroll