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.