https://github.com/ahwelgemoed/usedomlocation

A react hook to detect page changes in SPA's, especially Mendix Apps
https://github.com/ahwelgemoed/usedomlocation

mendix mendix-widget

Last synced: 7 months ago
JSON representation

A react hook to detect page changes in SPA's, especially Mendix Apps

• Host: GitHub
• URL: https://github.com/ahwelgemoed/usedomlocation
• Owner: ahwelgemoed
• License: apache-2.0
• Created: 2021-02-19T14:05:07.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-02-20T14:15:47.000Z (almost 5 years ago)
• Last Synced: 2025-06-23T08:11:29.464Z (8 months ago)
• Topics: mendix, mendix-widget
• Language: TypeScript
• Homepage:
• Size: 187 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
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](https://developer.mozilla.org/en-US/docs/Web/API/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


```js

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](https://github.com/ahwelgemoed/useDomLocation/issues/new).