@postinumero/remix-react-intl

integrate FormatJS (react-intl) with Remix for internationalization in your project

Setup

To get started, configure your vite.config.ts:

1// For Node.js versions below 22, install and import the polyfill:
2//import "core-js/proposals/promise-with-resolvers";
3
4import remixReactIntl from "@postinumero/remix-react-intl/remixReactIntl";
5import { vitePlugin as remix } from "@remix-run/dev";
6import { defineConfig } from "vite";
7import tsconfigPaths from "vite-tsconfig-paths";
8
9const intl = await remixReactIntl();
10
11export default defineConfig({
12  plugins: [
13    remix({
14      presets: [intl.remixPreset],
15      // Enable SPA mode by setting ssr to false
16      // ssr: false,
17    }),
18    tsconfigPaths(),
19    intl.vitePlugin,
20  ],
21});

Next, update your .gitignore file to exclude generated language files:

1# Server-side rendering (ssr) enabled
2/.compiled-lang
3# SPA mode (ssr: false)
4public/.compiled-lang
5
6/lang/en-default.json

Optional:

.eslintrc:

1{
2  "rules": {
3    "import/no-unresolved": [
4      "error",
5      { "ignore": ["@postinumero/remix-react-intl/options"] }
6    ]
7  }
8}

tsconfig.json:

1{
2  "compilerOptions": {
3    "types": ["@postinumero/remix-react-intl"]
4  }
5}

Usage

You can use react-intl components and hooks as you normally would:

Example: Using <FormattedMessage>

1import { FormattedMessage } from "react-intl";
2
3// ...
4
5<FormattedMessage defaultMessage="Welcome to FormatJS (react-intl) + Remix" />;

Example: Using useIntl

1import { useIntl } from "react-intl";
2
3// ...
4
5const intl = useIntl();
6
7intl.formatMessage({ defaultMessage: "Hello" });

Accessing intl in Actions & Loaders

In Remix action, loader, clientAction, and clientLoader, you can access the intl object (IntlShape) via loadIntl:

1import { loadIntl } from "@postinumero/remix-react-intl";
2import { ClientActionFunctionArgs } from "@remix-run/react";
3
4const clientAction = async (args: ClientActionFunctionArgs) => {
5  const intl = await loadIntl(args);
6
7  const successMessage = intl.formatMessage({
8    defaultMessage: "Operation was successful!",
9  });
10
11  // ...
12};

Accessing intl in meta Functions

In Remix meta functions, you can access the intl object (IntlShape) via metaIntl:

1import { metaIntl } from "@postinumero/remix-react-intl";
2import { MetaFunction } from "@remix-run/react";
3
4export const meta: MetaFunction = (args) => {
5  const intl = metaIntl(args);
6
7  // In SPA mode `intl` is `undefined` on first render
8  if (intl) {
9    return [
10      {
11        title: intl.formatMessage({
12          defaultMessage: "FormatJS (react-intl) example app | Remix",
13        }),
14      },
15    ];
16  }
17};

Managing Translations

Default messages are automatically extracted to /lang/en-default.json.

To add translations for other languages, manually create files in the /lang directory (e.g., /lang/en.json, /lang/en-GB.json, /lang/fi-FI.json). During the build process, messages are compiled. If a translation is missing, it falls back to the base language value or the default message if necessary.