ICU Message Format

This page demonstrates the minimal integration of ICU Message Format in Intor.

Intor does not include built-in ICU syntax.
ICU support is optional and can be integrated when needed.

Formatting responsibility is delegated to mature and standards-based implementations.

In this example, intl-messageformat is used as the ICU formatting engine.

See: FormatJS .

Installation

Install intl-messageformat:

npm
yarn
pnpm
bun
npm install intl-messageformat
yarn add intl-messageformat
pnpm add intl-messageformat
bun add intl-messageformat

Integration Steps

♯1 Format Handler

Since Intor already handles interpolation and rich tags, tag parsing must be disabled when using IntlMessageFormat.

Below is a minimal ICU Format Handler implementation:

icu-format-handler.ts
import type { FormatHandler, MessageValue } from "intor";
import IntlMessageFormat from "intl-messageformat";

export const icuFormatHandler: FormatHandler = ({
  rawMessage,
  locale,
  replacements,
}) => {
  const formatter = new IntlMessageFormat(
    rawMessage,
    locale,
    {},
    { ignoreTag: true },
  );
  return formatter.format(replacements) as MessageValue;
};

♯2 Inject the Handler

Inject icuFormatHandler into handlers during initialization.
For injection details, see: Handlers & Hooks .

Usage Example

The following example demonstrates translation using ICU Message Format:

example.tsx
export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  messages: {
    en: { icu: "Price: {value, number, ::currency/USD}" },
    fr: { icu: "Price: {value, number, ::currency/EUR}" },
  },
});

// ...

<p>{t("icu", { value: 12.5 })}</p>
// en → Price: $12.50
// fr → Price: 12,50 €

See: ICU Message syntax