@postinumero/react-router-formatjs
v0.3.6
Published
```sh npm i @postinumero/react-router-formatjs react-intl ```
Readme
@postinumero/react-router-formatjs
Install
npm i @postinumero/react-router-formatjs react-intlvite.config.ts:
import formatjs from "@postinumero/react-router-formatjs/vite";
export default defineConfig({
plugins: [formatjs()],
build: {
target: "ES2022", // For top level await
},
optimizeDeps: {
esbuildOptions: {
target: "ES2022", // For top level await
},
},
});.gitignore:
# FormatJS
/.lang
/lang/.extracted.jsonapp/routes.ts:
import intlRoutes from "@postinumero/react-router-formatjs/routes";
import { type RouteConfig, index } from "@react-router/dev/routes";
export default intlRoutes([index("routes/home.tsx")] satisfies RouteConfig);app/root.tsx:
import { withLayoutIntlProvider } from "@postinumero/react-router-formatjs";
import { useIntl } from "react-intl";
export const Layout = withLayoutIntlProvider(function Layout({ children }) {
const { locale } = useIntl();
return <html lang={locale}>...</html>;
});tsconfig.json:
{
"include": [
"node_modules/@postinumero/react-router-formatjs/types/react-intl.d.ts"
]
}Usage
You can use react-intl components and hooks as you normally would:
Example: Using <FormattedMessage>
import { FormattedMessage } from "react-intl";
<FormattedMessage defaultMessage="Hello" />;Example: Using useIntl
import { useIntl } from "react-intl";
const intl = useIntl();
intl.formatMessage({ defaultMessage: "Hello" });Accessing intl in Actions & Loaders
In action, loader, clientAction, and clientLoader, you can access the intl object (IntlShape) via loadIntl:
import { loadIntl } from "@postinumero/react-router-formatjs";
const action = async (args: Route.ActionArgs) => {
const intl = await loadIntl(args);
const successMessage = intl.formatMessage({
defaultMessage: "Operation was successful!",
});
};Accessing intl in meta Functions
In meta functions, you can access the intl object (IntlShape) via metaIntl:
import { metaIntl } from "@postinumero/react-router-formatjs";
export function meta(args: Route.MetaArgs) {
const intl = metaIntl(args);
return [
{
title: intl.formatMessage({
defaultMessage: "New React Router App",
description: "Home page title",
}),
},
];
}API
useOptions
Get access to fully resolved options. Example:
import { useOptions } from "@postinumero/react-router-formatjs";
const { availableLocales } = useOptions();<LocaleSelect>
Render a select component to change the requested locale.
import { LocaleSelect } from "@postinumero/react-router-formatjs";
<LocaleSelect />;<SetLocaleButton>
Render a button component to set the requested locale.
import { SetLocaleButton } from "@postinumero/react-router-formatjs";
<SetLocaleButton value="fi" />;CONFIG
Override the default configuration.
import { CONFIG } from "@postinumero/react-router-formatjs/config";
if (import.meta.env.VITE_defaultLocale) {
CONFIG.strategies.requestedLocales = [
"localStorage",
{ clientLoader: () => [import.meta.env.VITE_defaultLocale] },
];
}Add Translations
lang/[environment:]<locale>.json:
{
"UXCtM4": {
"defaultMessage": "Example.com: What's next?",
"description": "List of resources"
}
}See @postinumero/formatjs-tools Config for more information.