URL change detection for when Navigation API is not supported.
npm install url-changed
import { urlChanged } from 'url-changed';
const settings = {
// see below
};
const stopWatching = urlChanged(
(newUrl, oldUrl) => console.log(`${oldUrl} -> ${newUrl}`),
settings
);If the Navigation API is available, it is used exclusively for URL change detection. Otherwise one or more fallbacks are used to achieve a similar effect.
The 2nd parameter to urlChanged specifies which fallbacks to enable. All fallbacks are disabled by default but at least one fallback must be enabled.
Any time the <body>'s subtree changes, check if the url has changed.
urlChanged(fn, {
bodyMutation: true
});When hashchange event fires on window, check if the url has changed.
urlChanged(fn, {
hashchange: true
});When popstate event fires on window, check if the url has changed.
urlChanged(fn, {
popstate: true
});Every x milliseconds, check if the url has changed. This is relatively brute force.
urlChanged(fn, {
// milliseconds, must be > 0
poll: 100
});Use fallbacks regardless of Navigation API existence. Use this to test fallback behavior.
urlChanged(fn, {
forceFallbacks: true,
// Must enable at least one fallback
bodyMutation: true
});MIT