https://github.com/spurreiter/preact-i18next-icu
i18next provider with icu syntax for preact
https://github.com/spurreiter/preact-i18next-icu
Last synced: 3 months ago
JSON representation
i18next provider with icu syntax for preact
- Host: GitHub
- URL: https://github.com/spurreiter/preact-i18next-icu
- Owner: spurreiter
- License: mit
- Created: 2022-08-16T22:24:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-25T19:13:23.000Z (over 1 year ago)
- Last Synced: 2025-01-07T06:37:50.227Z (4 months ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#installation)
* [usage](#usage)
* [IntlProvider](#intlprovider)
* [useTranslation](#usetranslation)
* [Message](#message)
* [Number](#number)
* [DateTime](#datetime)
* [RelativeTime](#relativetime)
* [example and storybook](#example-and-storybook)
* [license](#license)
# installation
```
npm i preact-i18next-icu
```
# usage
## IntlProvider
Provides the context for [i18next][].
```jsx
import { IntlProvider } from 'preact-i18next-icu'
function App (props) {
{props.children}
}
```
**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.
```jsx
import { useTranslation } from 'preact-i18next-icu'
function Test () {
const { t, changeLanguage, lng, i18n } = useTranslation()
return (
<>
changeLanguage('fr')}>{t('Change to french')}
t('{language} selected', { language: lng })
t('Available languages: {languages}', { languages: i18n.languages.join(', ') })
>
)
}
```
## Message
Message which supports [ICU message syntax][].
```jsx
import { Message } from 'preact-i18next-icu'
const Hello = () =>
```
**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.
```jsx
import { Message } from 'preact-i18next-icu'
const MyNumber = () =>
// 1,234,567.089 for lng=en
// 1.234.567,089 for lng=de
const MyCurrency = () =>
// €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.
```jsx
import { DateTime } from 'preact-i18next-icu'
const DateTimeShort = () =>
// 3/12/2022 for lng='en-US'
// 12/03/2022 for lng='en-GB'
const DateTimeLong = () =>
// 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.
```jsx
import { DateTime } from 'preact-i18next-icu'
const MyRelativeTime = () =>
// 7 months ago for lng=en
const MyRelativeTime2 = () =>
// 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
[ICU message syntax]: https://formatjs.io/docs/core-concepts/icu-syntax
[NumberFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
[DateTimeFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
[DateTime]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
[i18next]: https://www.i18next.com
[i18next-http-backend]: https://npmjs.org/package/i18next-http-backend
[i18next-browser-languagedetector]: https://npmjs.org/package/i18next-browser-languagedetector
[i18next-icu]: https://npmjs.org/package/i18next-icu