{"id":29170390,"url":"https://github.com/ahwelgemoed/usedomlocation","last_synced_at":"2025-07-01T12:40:00.317Z","repository":{"id":57388537,"uuid":"340386964","full_name":"ahwelgemoed/useDomLocation","owner":"ahwelgemoed","description":"A react hook to detect page changes in SPA's, especially Mendix Apps","archived":false,"fork":false,"pushed_at":"2021-02-20T14:15:47.000Z","size":191,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-23T08:11:29.464Z","etag":null,"topics":["mendix","mendix-widget"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahwelgemoed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-19T14:05:07.000Z","updated_at":"2021-02-20T14:15:49.000Z","dependencies_parsed_at":"2022-09-19T02:11:11.560Z","dependency_job_id":null,"html_url":"https://github.com/ahwelgemoed/useDomLocation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ahwelgemoed/useDomLocation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2FuseDomLocation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2FuseDomLocation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2FuseDomLocation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2FuseDomLocation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahwelgemoed","download_url":"https://codeload.github.com/ahwelgemoed/useDomLocation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2FuseDomLocation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262964077,"owners_count":23391949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mendix","mendix-widget"],"created_at":"2025-07-01T12:39:57.380Z","updated_at":"2025-07-01T12:40:00.276Z","avatar_url":"https://github.com/ahwelgemoed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003euseDomLocation\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\n  \u003ca href=\"\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/Status-Production-blue?style=for-the-badge\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/ahwelgemoed/useDomLocation\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/issues/ahwelgemoed/useDomLocation?style=for-the-badge\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/usedomlocation\"\u003e\n    \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/npm/dw/usedomlocation?style=for-the-badge\u0026logo=npm\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/LICENSE\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/license-Apache%202.0-orange.svg?style=for-the-badge\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://www.ahwelgemoed.dev/\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/Creator-ahwelgemoed-blue?style=for-the-badge\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003cbr/\u003e\n\u003c/p\u003e\n\nA helper hook for monitoring page changes in Mendix Widgets.\n\n\u003ch2\u003eBrief Explanation\u003c/h2\u003e\n\nMendix 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.\n\n**What `useDomLocation` does:**\n\nIt 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.\n\nAs 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.\n\nNormal back and forward button presses are handled by `window.onpopstate`.\n\n`useDomLocation` will not fire on Page Load.\n\n\u003ch2\u003eUsage\u003c/h2\u003e\n\n```js\nconst { lastUpdateTime, createObserver, turnOffObserver } = useDomLocation({\n  locationCallBack,\n  throttleDuration: 500,\n  useMendixNav: true,\n});\n```\n\n\u003ch3\u003eProps Passed In\u003c/h3\u003e\n\n|                    | Type    | Info                                                                                           |\n| ------------------ | ------- | ---------------------------------------------------------------------------------------------- |\n| `locationCallBack` | func    | The callback that will fire when Location is detected                                          |\n| `throttleDuration` | number  | For how long the MutantObserver must be throttled                                              |\n| `useMendixNav`     | boolean | Indicate if you are using it in a mendix Widget, `true` for Mendix `false` for non Mendix apps |\n\n\u003ch3\u003eProps Passed back\u003c/h3\u003e\n\n|                   | Type    | Info                                           |\n| ----------------- | ------- | ---------------------------------------------- |\n| `lastUpdateTime`  | Date    | Passes back the last time the dom was updated. |\n| `createObserver`  | number  | Manually Create observer                       |\n| `turnOffObserver` | boolean | Manually turn off observer                     |\n\n\u003ch2\u003eIssues\u003c/h2\u003e\n\nPlease open an GH [issue](https://github.com/ahwelgemoed/useDomLocation/issues/new).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahwelgemoed%2Fusedomlocation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahwelgemoed%2Fusedomlocation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahwelgemoed%2Fusedomlocation/lists"}