preact-i18next-icu

i18next provider with icu syntax for preact

A slim wrapper around i18next for preact Components.

Implements:

• i18next-browser-languagedetector
• i18next-http-backend
• i18next-icu

ToC

• installation
• usage
  • IntlProvider
  • useTranslation
  • Message
  • Number
  • DateTime
  • RelativeTime
• example and storybook
• license

installation

npm i preact-i18next-icu

usage

IntlProvider

Provides the context for i18next.

import { IntlProvider } from 'preact-i18next-icu'

function App (props) {
  <IntlProvider lngs={['en', 'de']}>
    {props.children}
  </IntlProvider>
}

props

property	type	description
fallback?	preact.AnyComponent	fallback component which is rendered while new language settings are loading, e.g. spinner
backends?	i18next.Module[]	Array of i18next backends
options?	object	i18next init options
lngs?	string[]	Array of languages which are loaded on initialization

useTranslation

Grants access to the IntlProvider context.

import { useTranslation } from 'preact-i18next-icu'

function Test () {
  const { t, changeLanguage, lng, i18n } = useTranslation()

  return (
    <>
      <button onClick={() => changeLanguage('fr')}>{t('Change to french')}</button>
      <p>t('{language} selected', { language: lng })</p>
      <p>t('Available languages: {languages}', { languages: i18n.languages.join(', ') })</p>
    </>
  )
}

Message

Message which supports ICU message syntax.

import { Message } from 'preact-i18next-icu'

const Hello = () => <Message label="Hello {name}!" name="Elsa" />

props

property	type	description
label	string	the translation label
lng?	string	overrides the default language
...	string	the placeholder value(s)

Number

Uses Intl.NumberFormat to format a number.

import { Message } from 'preact-i18next-icu'

const MyNumber = () => <Number value={123456.012} />
// 1,234,567.089 for lng=en
// 1.234.567,089 for lng=de
const MyCurrency = () => <Number value={123456.012} currency="EUR" style="currency" />
// €123,456.01  for lng=en
// 123.456,01 € for lng=de

props

property	type	description
value	number	the number to translate
lng?	string	overrides the default language
...	any	see NumberFormat for all options.

DateTime

Uses Intl.DateTimeFormat to format a date or time.

import { DateTime } from 'preact-i18next-icu'

const DateTimeShort = () => <DateTime value={new Date('2020-03-12')} />
// 3/12/2022 for lng='en-US'
// 12/03/2022 for lng='en-GB'
const DateTimeLong = () => <DateTime value={new Date() weekday='long' year='numeric' month='long' day='numeric'} />
// Thursday, March 12, 20202 for lng='en-US'
// Thursday, 12 March, 20202 for lng='en-GB'

props

property	type	description
value	number	the Date or Time to translate
lng?	string	overrides the default language
date?	boolean	if true show only date
time?	boolean	if true show only time
hour12?	boolean	if true show time in in 12 hour format with am, pm
...	any	see DateTimeFormat for all options.

RelativeTime

Uses Intl.RelativeTimeFormat to format a relative date or time.

import { DateTime } from 'preact-i18next-icu'

const MyRelativeTime = () => <RelativeTime value="2022-01-01" />
// 7 months ago for lng=en
const MyRelativeTime2 = () => <RelativeTime value="1" unit="day" />
// tomorrow for lng=en

props

property	type	description
value	Date|number	the number to translate
lng?	string	overrides the default language
...	any	see DateTimeFormat for all options.

example and storybook

npm run dev

Then access http://localhost:5173

license

MIT licensed