react-intlayer/dist/esm/client/useRewriteURL.mjs

Easily internationalize i18n your React applications with type-safe multilingual content management.

'use client';

import { useLocale } from "./useLocale.mjs";
import { routing } from "@intlayer/config/built";
import { useEffect } from "react";
import { getRewritePath } from "@intlayer/core/localization";

//#region src/client/useRewriteURL.ts
/**
* Client-side hook to manage URL rewrites without triggering a router navigation.
* It uses `window.history.replaceState` to update the URL in the address bar.
*
* This hook is useful to "prettify" the URL when the user lands on a canonical path
* that has a localized alias defined in `intlayer.config.ts`.
*
* @example
* ```tsx
* import { useRewriteURL } from 'react-intlayer';
*
* const MyComponent = () => {
*   useRewriteURL();
*
*   return <div>My Component</div>;
* };
* ```
*/
const useRewriteURL = () => {
	const { locale } = useLocale();
	const rewrite = routing?.rewrite;
	useEffect(() => {
		if (typeof window === "undefined" || !rewrite) return;
		const pathname = window.location.pathname;
		const targetPath = getRewritePath(pathname, locale, rewrite);
		if (targetPath && targetPath !== pathname) window.history.replaceState(window.history.state, "", targetPath + window.location.search + window.location.hash);
	}, [locale, rewrite]);
};

//#endregion
export { useRewriteURL };
//# sourceMappingURL=useRewriteURL.mjs.map