https://github.com/exogen/react-html-i18n

React internationalization (i18n) with ICU message syntax and HTML support.
https://github.com/exogen/react-html-i18n

i18n icu internationalization react reactjs translation

Last synced: 19 days ago
JSON representation

React internationalization (i18n) with ICU message syntax and HTML support.

• Host: GitHub
• URL: https://github.com/exogen/react-html-i18n
• Owner: exogen
• License: mit
• Created: 2020-10-27T02:21:44.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-30T03:57:34.000Z (about 4 years ago)
• Last Synced: 2024-10-25T04:21:48.817Z (22 days ago)
• Topics: i18n, icu, internationalization, react, reactjs, translation
• Language: JavaScript
• Homepage: https://exogen.github.io/react-html-i18n/
• Size: 1.25 MB
• Stars: 5
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-html-i18n



**[Demo!](https://exogen.github.io/react-html-i18n/)**



- [ICU message format](https://unicode-org.github.io/icu/userguide/format_parse/messages/).

- Argument values can be React elements.

- Full HTML support (including attributes).

- Custom argument formatters.

- Custom HTML tags and tag overrides.

- Server-side rendering (SSR) compatible.

- Fast and [lightweight](https://bundlephobia.com/result?p=react-html-i18n)!

## Install

```console

$ yarn add react-html-i18n

```

```console

$ npm install react-html-i18n

```

## Motivation

No other translation library (that I’m aware of) supports both HTML and React

elements in the same message.

Some libraries support custom tags, like this:

```html

Hello, {name}.

```

However, it’s not really HTML, as translators can’t add attributes, and each tag

must have its behavior defined by the programmer. If you only need basic rich

text features like bold and italics, that might be good enough. But what if the

translator wants to control the `href` of a link, or add inline `style` to an

element?

If you have an existing collection of translation strings containing HTML,

you’re out of luck with most i18n libraries. At best, the ones that support HTML

(like old versions of `react-intl`) only allow substitution of primitive values.

This library supports substitution of any value that React can render –

including React elements!