Preact-i18next-icu NPM

preact-i18next-icu

i18next provider with icu syntax for preact

A slim wrapper around i18next for preact Components.

Implements:

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