https://github.com/strikingly/react-i18n
Gettext style i18n in React that supports component interpolation.
https://github.com/strikingly/react-i18n
gettext i18n internationalization react react-i18n
Last synced: about 1 year ago
JSON representation
Gettext style i18n in React that supports component interpolation.
- Host: GitHub
- URL: https://github.com/strikingly/react-i18n
- Owner: strikingly
- License: bsd-3-clause
- Created: 2016-07-01T01:42:50.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T09:14:50.000Z (over 3 years ago)
- Last Synced: 2025-04-18T14:54:20.642Z (about 1 year ago)
- Topics: gettext, i18n, internationalization, react, react-i18n
- Language: JavaScript
- Homepage:
- Size: 324 KB
- Stars: 3
- Watchers: 6
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE-Sentry
Awesome Lists containing this project
README
# react-i18n
React i18n
`npm i r-i18n --save`
## Usage
```jsx
import React from 'react'
import {
createI18n
debug,
} from 'r-i18n'
```
## Samples
#### init
Use [Jed](http://slexaxton.github.io/Jed) to initialize i18n in your project.
```jsx
const i18n = createI18n({ /* jed options */ }))
```
#### t
Component as placeholder
```jsx
const {t} = i18n
t('Welcome to Strikingly')
// -> '欢迎使用 Strikingly'
t('Welcome to Strikingly, %{username}', { username: 'Shu' })
// -> '欢迎使用 Strikingly，Shu'
// React component as placeholder
t('%{author} assigned this event to %{assignee}', {
author: ,
assignee: example@example.com
})
// -> [, ' assigned this event to ', example@example.com]
```
#### tct
HTML inside translated string with a root wrapper
```jsx
const {tct} = i18n
//...
tct('Welcome. Click [link:here]', {
root:
,
link:
})
// -> 欢迎。点击 此处 继续。
```
### Debug & mark
Wrap `t` and `tct` with a wrapper ``
(for React Native, it just appends a flag emoji to the message)
```jsx
import {createI18n, debug} from 'r-i18n'
//...
const i18n = createI18n({ /* jed options */ }))
debug()
i18n.tct('Welcome. Click [link:here]', {
root:
,
link:
})
// ->
// 欢迎。点击 此处 继续。
//
```
## React Native
React-i18n works both with React and React Native.
For React Native, use `npm i rn-i18n --save`.
React Native branch: [react-native](https://github.com/strikingly/react-i18n/tree/react-native)
## Syntax
r-i18n uses `%{}` to pass args.
__And use `%%` to escape `%`__.
i.e. `t('%{percentage}%% correct', { percentage: 100 }) -> '100% correct'`
## Acknowledgement
#### [Sentry](https://github.com/getsentry/sentry)
Post about i18n and React on Sentry blog: [link](https://blog.getsentry.com/2016/01/07/react-i18n.html).
[Sentry source code on GitHub](https://github.com/getsentry/sentry/blob/f489a20c6d5318aba2f30fec0d745835436a94f7/src/sentry/static/sentry/app/locale.jsx).
[License of Sentry](./LICENSE-Sentry).
#### [sprintf.js](https://github.com/alexei/sprintf.js)
[License of sprintf.js](./LICENSE-sprintfjs)