Skip to main content

Function: useWindowEvent()

Call Signature​

useWindowEvent<T, K>(eventTarget, event, listener, useCapture?): useWindowEventType

Defined in: packages/react-page-renderer/src/hooks/windowEvent.ts:50

Hook for binding window events using IMA window API.

Type Parameters​

T​

T extends WindowEventTargets

K​

K extends string | number | symbol

Parameters​

eventTarget​

T

Optional event target, if left blank it defaults to current window (=> can be omitted in most use cases).

event​

K

Event name.

listener​

(event) => void

useCapture?​

Use capture instead of bubbling (default).

boolean | EventListenerOptions

Returns​

useWindowEventType

window object and utility methods.

Example​

// Using window as event target
const { dispatchEvent, createCustomEvent } = useWindowEvent(
  window,
  'custom-event',
  () => windowEventCallback(a, b)
);

// Using custom event target
const { dispatchEvent } = useWindowEvent(
	window.getElementById('page'),
	'click',
	() => windowEventCallback(a, b),
	false,
);

// Dispatching custom event
useEffect(() => {
	dispatchEvent(
		createCustomEvent('custom-event'),
		{ data: {} }
	);
});

Call Signature​

useWindowEvent<T, E>(eventTarget, event, listener, useCapture?): useWindowEventType

Defined in: packages/react-page-renderer/src/hooks/windowEvent.ts:59

Hook for binding window events using IMA window API.

Type Parameters​

T​

T extends EventTarget

E​

E extends Event = Event

Parameters​

eventTarget​

T

Optional event target, if left blank it defaults to current window (=> can be omitted in most use cases).

event​

string

Event name.

listener​

(event) => void

useCapture?​

Use capture instead of bubbling (default).

boolean | EventListenerOptions

Returns​

useWindowEventType

window object and utility methods.

Example​

// Using window as event target
const { dispatchEvent, createCustomEvent } = useWindowEvent(
  window,
  'custom-event',
  () => windowEventCallback(a, b)
);

// Using custom event target
const { dispatchEvent } = useWindowEvent(
	window.getElementById('page'),
	'click',
	() => windowEventCallback(a, b),
	false,
);

// Dispatching custom event
useEffect(() => {
	dispatchEvent(
		createCustomEvent('custom-event'),
		{ data: {} }
	);
});