use-window-event

Adds event listener to window on component mount and removes it on unmount

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

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

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

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

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

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

Example

Search focus with ⌘ + K on mac or Ctrl + K on windows and linux on Mantine docs website:

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

function Search() {
  const inputRef = useRef();

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

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

Definition

Hook has exact 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;