web-components for i18next
npm install i18next-wcWeb-components for [i18next][].
Handles formatting of intl messages as well as formatting date and numbers.
Usable as vanillaJS web-components as well as with JSX (react...).
The following components are available
- to format messages with [i18next][]
- to format dates with [Intl.DateTimeFormat][]
- to format relative dates with [Intl.RelativeTimeFormat][]
- to format numbers with [Intl.NumberFormat][]
For inspiration of this project credits go to [kwc-i18next][] 👏.
Demopages are at https://spurreiter.github.io/i18next-wc
* Installation
* Usage
* intl-message
* Examples
* Attributes
* intl-datetime
* Example
* Attributes
* intl-relative-time
* Example
* Attributes
* intl-number
* Example
* Attributes
* Using with JSX
* Contributing
* License
* References
Install both [i18next][] and this package as dependencies
```
npm i i18next-wc i18next
With a CDN...
`html
`
In your own bundled code...
`js
import i18Next from 'i18next'
import 'i18next-wc'
window.i18next = i18next
i18next.init(...)
`
`html
`
Formats messages with [i18next][].
`html
A value
My Title
Hello World!
With HTML it might get dangerous
With HTML it might get dangerous
One item
10 items
`
- _examples/message-plurals.html_ if you like to use a custom i18next post-processor
- _examples/message-icu.html_ for using the web-component with [i18next-icu][]
| attribute | type | description |
| --------- | --------- | ----------- |
| label | string | i18next translation label |string
| _key_ | | _deprecated_ use label instead; i18next translation label |number
| count | | count for plurals |string
| context | | i18next context |string
| value | , json, object | use value for for default inserts |string
| lng | | changes default language |string
| ns | , string[] | changes default namespace |json
| options | , object | i18next options. See [i18next-options][] |boolean
| dangerous | | dangerously insert unescaped content (XSS!) |boolean
| hidden | | hide translation from rendering |
> Note: Avoid using key attribute with keyed frameworks as this attributelabel
> is used for referencing Elements in DOM. Use attribute instead.
`html
05/04/2020
22:03:47
dimanche
12/03/2020
3/12/2020
dim. 5 avril 2020
2020年4月5日日曜日
05/04/2020 à 10:03:47 PM UTC+2
06/04/2020 à 5:03:47 heure normale du Japon
05/04/2020
`
| attribute | type | description |
| ---------------------- | --------- | ----------- |
| lng | string | changes default language |Date
| value | , ISOString | if string than use iso format. E.g. local date 2020-12-31 12:00:00 or UTC date 2020-12-31T12:00:00Z. Use always new Date().toISOString() to be on the safe side. If undefined current timestamp is used. | json
| options | , object | json formatted string of [DateTimeFormatOptions][] |string
| weekday | | "narrow", "short", "long" |string
| era | | "narrow", "short", "long" |string
| year | | "2-digit", "numeric" |string
| month | | "2-digit", "numeric", "narrow", "short", "long" |string
| day | | "2-digit", "numeric" |string
| hour | | "2-digit", "numeric" |string
| minutes | | "2-digit", "numeric" |string
| seconds | | "2-digit", "numeric" |boolean
| hour12 | | use AM, PM if true |string
| hourCycle | | "h11", "h12", "h23", "h24" |string
| timeZone | | timezone of date e.g. "Asia/Tokyo" |string
| timeZoneName | | "short", "long" |string
| localeMatcher | | "lookup", "best fit" |string
| formatMatcher | | "basic", "best fit" |string
| numberingSystem | | "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt" |string
| calendar | | buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc" |boolean
| date | | if set display date |boolean
| time | | if set display time |
> ⚠ NOTE: Consider using a [polyfill][Intl.RelativeTimeFormat polyfill] for Safari, Safari iOS and Edge
See _examples/relative-time.html_.
| attribute | type | description |
| ------------- | --------- | ----------- |
| lng | string | changes default language |Date
| value | , ISOString | if string than use iso format. E.g. local date 2020-12-31 12:00:00 or UTC date 2020-12-31T12:00:00Z. Use always new Date().toISOString() to be on the safe side | json
| options | , object | json formatted string of [todo][] |string
| unit | | "year", "quarter", "month", "week", "day", "hour", "minute", "second" |string
| style | | "narrow", "short", "long" |string
| numeric | | "always", "auto" |string
| localeMatcher | | "lookup", "best fit" |boolean
| update | | automatically update value |
`html
123.456,789
1,23,456.789
١٢٣٬٤٥٦٫٧٨٩
一二三,四五六.七八九
123.456,79 €
¥123,457
1,23,000
50 mi/h
12 litres
9.877E8
9,877E8
987.654E6
987,654E6
9.9亿
988 M
`
| attribute | type | description |
| -------------------------- | -------- | ----------- |
| lng | string | changes default language |number
| value | | value as number string | json
| options | or object | object or json formatted string of [NumberFormatOptions][] |string
| styleProp | | "decimal", "percent", "currency", "unit" style
alternatively use within options |string
| currency | | [ISO 4217][] currency and funds code e.g. "EUR", "USD" |string
| currencyDisplay | | "code", "symbol", "narrowSymbol", "name" |string
| currencySign | | "standard", "accounting" |string
| unit | | See TC39 IsSanctionedSimpleUnitIdentifier |string
| unitDisplay | | "short", "narrow", "long" |string
| notation | | "standard", "scientific", "engineering", "compact" |string
| compactDisplay | | "short", "long" |boolean
| useGrouping | | |string
| signDisplay | | "auto", "never", "always", "exceptZero" |string
| localeMatcher | | "lookup", "best fit" |number
| minimumIntegerDigits | | 1...21 |number
| minimumFractionDigits | | 1...21 |number
| maximumFractionDigits | | 1...21 |number
| minimumSignificantDigits | | 1...21 |number
| maximumSignificantDigits | | 1...21 |string
| numberingSystem | | "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt" |
You can use all components in JSX (react, apprun, ...) as well.
Check _examples/jsx.html_
`jsx
import i18next from "i18next"
// take care of treeshaking - removing the below line may cause that the Wc gets removed by treeshaking
import 'i18next-wc'
import { intlMessage } from 'i18next-wc'
// initialize i18next
i18next.init({
lng: 'en-GB',
fallbackLng: "en",
resources: {
en: {
default: {
placeholder: 'fill in here',
'Selected language': 'Selected language: {{value}}'
},
},
fr: {
default: {
placeholder: 'remplir ici',
'Selected language': 'Langue choisie : {{value}}'
}
}
},
defaultNS: 'default'
})
// inject i18next into web-component
const IntlMessage = (props) => (
// use in your custom component
export function JsxComponent ({ lng }) {
return (
<>
>
)
}
``
Feel free to clone the project and submit a PR.
On contributing you implicitly agree to license your code under the terms of the MIT license.
MIT Licensed
* [DateTimeFormatOptions][DateTimeFormatOptions]
* [i18next][i18next]
* [i18next-icu][i18next-icu]
* [i18next-options][i18next-options]
* [Intl.DateTimeFormat][Intl.DateTimeFormat]
* [Intl.NumberFormat][Intl.NumberFormat]
* [Intl.RelativeTimeFormat][Intl.RelativeTimeFormat]
* [Intl.RelativeTimeFormat polyfill][Intl.RelativeTimeFormat polyfill]
* [ISO 4217][ISO 4217]
* [kwc-i18next][kwc-i18next]
* [NumberFormatOptions][NumberFormatOptions]
* [RelativeTimeFormatOptions][RelativeTimeFormatOptions]
[kwc-i18next]: https://github.com/successk/kwc-i18next
[i18next]: https://www.i18next.com/
[i18next-options]: https://www.i18next.com/translation-function/essentials#overview-options
[Intl.DateTimeFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
[DateTimeFormatOptions]: https://tc39.es/ecma402/#datetimeformat-objects
[Intl.RelativeTimeFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat
[RelativeTimeFormatOptions]: https://v8.dev/features/intl-relativetimeformat
[Intl.RelativeTimeFormat polyfill]: https://github.com/wessberg/intl-relative-time-format
[Intl.NumberFormat]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
[NumberFormatOptions]: https://tc39.es/ecma402/#table-numberformat-resolvedoptions-properties
[ISO 4217]: https://en.wikipedia.org/wiki/ISO_4217
[i18next-icu]: https://github.com/i18next/i18next-icu