i18next-wc

Web-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

Table of contents

* 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

Installation

Install both [i18next][] and this package as dependencies

``
npm i i18next-wc i18next
`

Usage

With a CDN...

`html






`

In your own bundled code...

`js
import i18Next from 'i18next'
import 'i18next-wc'

window.i18next = i18next

i18next.init(...)
`

`html




`

intl-message

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




`

$3

- _examples/message.html_

- _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][]

$3

| attribute | type | description |
| --------- | --------- | ----------- |
| label | string | i18next translation label |
| _key_ | string | _deprecated_ use label instead; i18next translation label |
| count | number | count for plurals |
| context | string | i18next context |
| value | string, json, object | use value for for default inserts |
| lng | string | changes default language |
| ns | string, string[] | changes default namespace |
| options | json, object | i18next options. See [i18next-options][] |
| dangerous | boolean | dangerously insert unescaped content (XSS!) |
| hidden | boolean | hide translation from rendering |

> Note: Avoid using key attribute with keyed frameworks as this attribute
> is used for referencing Elements in DOM. Use label attribute instead.

intl-datetime

`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




`

$3

See _examples/datetime.html_.

$3

| attribute | type | description |
| ---------------------- | --------- | ----------- |
| lng | string | changes default language |
| value | Date, 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. |
| options | json, object | json formatted string of [DateTimeFormatOptions][] |
| weekday | string | "narrow", "short", "long" |
| era | string | "narrow", "short", "long" |
| year | string | "2-digit", "numeric" |
| month | string | "2-digit", "numeric", "narrow", "short", "long" |
| day | string | "2-digit", "numeric" |
| hour | string | "2-digit", "numeric" |
| minutes | string | "2-digit", "numeric" |
| seconds | string | "2-digit", "numeric" |
| hour12 | boolean | use AM, PM if true |
| hourCycle | string | "h11", "h12", "h23", "h24" |
| timeZone | string | timezone of date e.g. "Asia/Tokyo" |
| timeZoneName | string | "short", "long" |
| localeMatcher | string | "lookup", "best fit" |
| formatMatcher | string | "basic", "best fit" |
| numberingSystem | string | "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt" |
| calendar | string | buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc" |
| date | boolean | if set display date |
| time | boolean | if set display time |

intl-relative-time

> ⚠ NOTE: Consider using a [polyfill][Intl.RelativeTimeFormat polyfill] for Safari, Safari iOS and Edge

$3

See _examples/relative-time.html_.

$3

| attribute | type | description |
| ------------- | --------- | ----------- |
| lng | string | changes default language |
| value | Date, 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 |
| options | json, object | json formatted string of [todo][] |
| unit | string | "year", "quarter", "month", "week", "day", "hour", "minute", "second" |
| style | string | "narrow", "short", "long" |
| numeric | string | "always", "auto" |
| localeMatcher | string | "lookup", "best fit" |
| update | boolean | automatically update value |

intl-number

`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




`

$3

See _examples/number.html_.

$3

| attribute | type | description |
| -------------------------- | -------- | ----------- |
| lng | string | changes default language |
| value | number | value as number string |
| options | json or object | object or json formatted string of [NumberFormatOptions][] |
| styleProp | string | "decimal", "percent", "currency", "unit"
alternatively use style within options |
| currency | string | [ISO 4217][] currency and funds code e.g. "EUR", "USD" |
| currencyDisplay | string | "code", "symbol", "narrowSymbol", "name" |
| currencySign | string | "standard", "accounting" |
| unit | string | See TC39 IsSanctionedSimpleUnitIdentifier |
| unitDisplay | string | "short", "narrow", "long" |
| notation | string | "standard", "scientific", "engineering", "compact" |
| compactDisplay | string | "short", "long" |
| useGrouping | boolean| |
| signDisplay | string | "auto", "never", "always", "exceptZero" |
| localeMatcher | string | "lookup", "best fit" |
| minimumIntegerDigits | number | 1...21 |
| minimumFractionDigits | number | 1...21 |
| maximumFractionDigits | number | 1...21 |
| minimumSignificantDigits | number | 1...21 |
| maximumSignificantDigits | number | 1...21 |
| numberingSystem | string | "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt" |

Using with JSX

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 (
<>



)
}
``

Contributing

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.

License

MIT Licensed

References

* [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