use-window-event

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

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 { 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;
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback