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

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

'use client';

import { IntlayerClientContext } from "./IntlayerProvider.mjs";
import { useContext, useMemo } from "react";
import { getIntlayer } from "@intlayer/core";

//#region src/client/useI18n.ts
/**
* Hook that provides a translation function `t()` for accessing nested content by key.
* This hook mimics the pattern found in libraries like i18next, next-intl, and vue-i18n.
*
* @param namespace - The dictionary key to scope translations to
* @param locale - Optional locale override. If not provided, uses the current context locale
* @returns A translation function `t(key)` that returns the translated content for the given key
*
* @example
* ```tsx
* const t = useI18n('IndexPage');
* const title = t('title'); // Returns translated string for 'IndexPage.title'
* const nestedContent = t('section.subtitle'); // Returns 'IndexPage.section.subtitle'
* // For attributes like `aria-label`, use `.value` to get the plain string
* const ariaLabel = t('button.ariaLabel').value; // 'Close modal'
* ```
*/
const useI18n = (namespace, locale) => {
	const { locale: currentLocale } = useContext(IntlayerClientContext);
	const localeTarget = useMemo(() => locale ?? currentLocale, [currentLocale, locale]);
	const dictionaryContent = useMemo(() => getIntlayer(namespace, localeTarget), [namespace, localeTarget]);
	const t = (path) => {
		if (!path) return dictionaryContent;
		const pathArray = path.split(".");
		let current = dictionaryContent;
		for (const key of pathArray) {
			current = current?.[key];
			if (current === void 0) return dictionaryContent;
		}
		return current;
	};
	return t;
};

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