react-intl

The preset for react-intl (FormatJS). It reads formatMessage, FormattedMessage, defineMessage and defineMessages.

The react-intl preset supports react-intl and the FormatJS packages.

Detection

The preset applies when the project depends on react-intl, or on any @formatjs/* package.

x18n.config.ts

import { reactIntl } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: [reactIntl()],
})

Supported syntax

react-intl puts the key in the id of a message descriptor:

import { defineMessages, FormattedMessage, useIntl } from 'react-intl'

const messages = defineMessages({
  title: { id: 'app.title', defaultMessage: 'My App' },
})

function Header() {
  const intl = useIntl()
  return (
    <header>
      <h1>{intl.formatMessage(messages.title)}</h1>
      <p>{intl.formatMessage({ id: 'app.greeting' }, { name: 'Ada' })}</p>
      <FormattedMessage id="nav.home" />
    </header>
  )
}

intl.formatMessage, formatMessage and defineMessage read id from their first argument.
<FormattedMessage id="..."> is a usage of its id.
defineMessages reads the id of each property.

Placeholders

ICU MessageFormat, as for next-intl.

Extraction templates

Kinds	Template	Imports
`jsx-text`	`<FormattedMessage id="{key}" />`	`import { FormattedMessage } from 'react-intl'`
`jsx-attribute`	`{attr}={intl.formatMessage({ id: '{key}' }{args})}`
`js-string`, `js-template`	`intl.formatMessage({ id: '{key}' }{args})`

next-intl

The preset for next-intl and use-intl. It reads useTranslations and getTranslations with their namespaces.

svelte-i18n

The preset for svelte-i18n. It reads the $_ store and its aliases in Svelte components and scripts.