react-intlayer
Version:
Easily internationalize i18n your React applications with type-safe multilingual content management.
95 lines (92 loc) • 3.67 kB
JavaScript
'use client';
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
const require_editor_EditorProvider = require('../editor/EditorProvider.cjs');
const require_client_useLocaleStorage = require('./useLocaleStorage.cjs');
let _intlayer_config_built = require("@intlayer/config/built");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _intlayer_config_client = require("@intlayer/config/client");
let _intlayer_core_localization = require("@intlayer/core/localization");
//#region src/client/IntlayerProvider.tsx
/**
* Context that stores the current locale on the client side.
*/
const IntlayerClientContext = (0, react.createContext)({
locale: require_client_useLocaleStorage.localeInStorage ?? _intlayer_config_built.internationalization?.defaultLocale,
setLocale: () => null,
isCookieEnabled: true
});
/**
* Hook that provides the current Intlayer client context.
*
* @returns The current Intlayer context values.
*/
const useIntlayerContext = () => (0, react.useContext)(IntlayerClientContext) ?? {};
/**
* Provider that stores the current locale on the client side.
*
* This component is focused on content delivery without the editor features.
*
* @param props - The provider props.
* @returns The provider component.
*/
const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLocaleProp, children, setLocale: setLocaleProp, disableEditor, isCookieEnabled }) => {
const { locales: availableLocales, defaultLocale: defaultLocaleConfig } = _intlayer_config_built.internationalization ?? {};
const [currentLocale, setCurrentLocale] = (0, react.useState)(localeProp ?? require_client_useLocaleStorage.localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig);
(0, react.useEffect)(() => {
if (localeProp && localeProp !== currentLocale) setCurrentLocale(localeProp);
}, [localeProp]);
(0, react.useEffect)(() => {
(0, _intlayer_config_client.setIntlayerIdentifier)();
}, []);
const setLocaleBase = (newLocale) => {
if (currentLocale.toString() === newLocale.toString()) return;
if (!availableLocales?.map(String).includes(newLocale)) {
console.error(`Locale ${newLocale} is not available`);
return;
}
setCurrentLocale(newLocale);
require_client_useLocaleStorage.setLocaleInStorage(newLocale, isCookieEnabled);
};
const setLocale = setLocaleProp ?? setLocaleBase;
const resolvedLocale = (0, _intlayer_core_localization.localeResolver)(currentLocale);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IntlayerClientContext.Provider, {
value: {
locale: resolvedLocale,
setLocale,
disableEditor
},
children
});
};
/**
* Main provider for Intlayer in React applications.
*
* It includes the editor provider by default, allowing for live content editing
* if configured.
*
* @param props - The provider props.
* @returns The provider component with editor support.
*
* @example
* ```tsx
* import { IntlayerProvider } from 'react-intlayer';
*
* const App = () => (
* <IntlayerProvider>
* <MyComponent />
* </IntlayerProvider>
* );
* ```
*/
const IntlayerProvider = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IntlayerProviderContent, {
...props,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_editor_EditorProvider.EditorProvider, {}), children]
});
//#endregion
exports.IntlayerClientContext = IntlayerClientContext;
exports.IntlayerProvider = IntlayerProvider;
exports.IntlayerProviderContent = IntlayerProviderContent;
exports.useIntlayerContext = useIntlayerContext;
//# sourceMappingURL=IntlayerProvider.cjs.map