useDomLocation

A helper hook for monitoring page changes in Mendix Widgets.

Brief Explanation

Mendix is a SPA and window.onpopstate is inconsistent in detecting location changes, and only seems to fire if back and forward button in the browser is clicked.

What useDomLocation does:

It monitors changes in the Dom using the MutationObserver, and when changes are detected it will check window.history or mx.ui.getContentForm() for changes. If there are changes it will fire a Callback function you passed in, thus giving you a reliable way to monitor page changes.

As MutationObserver will fire a lot ,but is very performant, when the page location is changed and even fire when stuff like info boxes are opened, useDomLocation throttles the MutationObserver.

Normal back and forward button presses are handled by window.onpopstate.

useDomLocation will not fire on Page Load.

Usage

const { lastUpdateTime, createObserver, turnOffObserver } = useDomLocation({
  locationCallBack,
  throttleDuration: 500,
  useMendixNav: true,
});

Props Passed In

	Type	Info
locationCallBack	func	The callback that will fire when Location is detected
throttleDuration	number	For how long the MutantObserver must be throttled
useMendixNav	boolean	Indicate if you are using it in a mendix Widget, true for Mendix false for non Mendix apps

Props Passed back

	Type	Info
lastUpdateTime	Date	Passes back the last time the dom was updated.
createObserver	number	Manually Create observer
turnOffObserver	boolean	Manually turn off observer

Issues

Please open an GH issue.