useEventListener doesn't work with window 'message' events from iframes

[daedalus28]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.2.2

What package has an issue?

@mantine/hooks

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

I'm attempting to migrate from usehooks-ts to @mantine/hooks (I was directed here from this comment which seems like many devs are migrating here from usehooks-ts: juliencrn/usehooks-ts#675 (comment))

useEventListener doesn't seem to support window message events. I'm using useEventListener currently to support an iframe embedding use case where the frame content posts messages back to the parent (in my case, to embed Metabase and be notified of changes that happen within it)

The mantine implementation is limited to HTMLElementEventMap:
https://github.com/mantinedev/mantine/blob/dd33a2c6fc4c9c5b4c72fcf8e2b8cc4ad9b698a1/packages/%40mantine/hooks/src/use-event-listener/use-event-listener.ts#L3C50-L3C69

The usehooks-ts implementation can handle window events, svg events, and more:
https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useEventListener/useEventListener.ts#L77-L79

It seems like a bug to me, but if this isn't something the mantine team has any desire to implement, feel free to close this 👍

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

Don't restrict to only HTMLElementEventMap and support window events.

Self-service

• I would be willing to implement a fix for this issue

[shehryar-turing]

Thanks for raising this!

This is working as designed: useEventListener is scoped to DOM elements via a ref (it’s typed with HTMLElementEventMap). For window-level events like postMessage, use useWindowEvent, which adds/removes listeners on window and is typed against WindowEventMap (including 'message').

Example for iframe → parent communication:

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

// Narrow the origin/type to what you expect from the embedded app
const METABASE_ORIGIN = 'https://your.metabase.host';

type MetabaseMessage = { type: string; payload?: unknown };

useWindowEvent('message', (e: MessageEvent<MetabaseMessage>) => {
  if (e.origin !== METABASE_ORIGIN) return; // security guard

  // Handle messages
  if (e.data?.type === 'dashboardFiltersChanged') {
    // ... your logic here using e.data.payload
  }
});

Notes:

• useWindowEvent mirrors window.addEventListener, including the optional options argument if you need { passive: true }, etc.
• Keep using useEventListener for element-specific events (e.g., load on a specific <iframe ref={...} />).
• If you need a single hook that targets either an element or window, you can build a tiny wrapper in your app, but Mantine keeps these concerns separate by design.

Hope that helps! If anything’s missing for your use case, let us know what API you’d like to see and we can consider it as an enhancement.

[daedalus28]

Super helpful, thank you! I'm not sure why it didn't occur to me to look for a differently named hook 🤦

Closing this now 👍