Skip to content

Gettext style i18n in React that supports component interpolation.

License

BSD-3-Clause, BSD-3-Clause licenses found

Licenses found

BSD-3-Clause
LICENSE-Sentry
BSD-3-Clause
LICENSE-sprintfjs
Notifications You must be signed in to change notification settings

strikingly/react-i18n

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-i18n

React i18n

npm i r-i18n --save

Usage

import React from 'react'

import {
  createI18n
  debug, 
} from 'r-i18n'

Samples

init

Use Jed to initialize i18n in your project.

const i18n = createI18n({ /* jed options */ })) 

t

Component as placeholder

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: <Author value={author} />,
  assignee: <em>example@example.com</em>
})
// -> [<Author value={author} />, ' assigned this event to ', <em>example@example.com</em>]

tct

HTML inside translated string with a root wrapper

const {tct} = i18n

//...

tct('Welcome. Click [link:here]', {
  root: <p/>,
  link: <a href="#" />
})
// -> <p>欢迎。点击 <a href="#">此处</a> 继续。</p>

Debug & mark

Wrap t and tct with a wrapper <span class="translation-wrapper"/>

(for React Native, it just appends a flag emoji to the message)

import {createI18n, debug} from 'r-i18n'

//...
const i18n = createI18n({ /* jed options */ })) 
debug()

i18n.tct('Welcome. Click [link:here]', {
  root: <p/>,
  link: <a href="#" />
})
// -> <span class="translation-wrapper">
//      <p>欢迎。点击 <a href="#">此处</a> 继续。</p>
//    </span>

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

Syntax

r-i18n uses %{} to pass args.
And use %% to escape %.

i.e. t('%{percentage}%% correct', { percentage: 100 }) -> '100% correct'

Acknowledgement

Post about i18n and React on Sentry blog: link.

Sentry source code on GitHub.

License of Sentry.

License of sprintf.js

About

Gettext style i18n in React that supports component interpolation.

Topics

Resources

License

BSD-3-Clause, BSD-3-Clause licenses found

Licenses found

BSD-3-Clause
LICENSE-Sentry
BSD-3-Clause
LICENSE-sprintfjs

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •