GitHub

  • import React , { Component } from ‘ react ‘ ; import { translate } from ‘ react-i18next ‘ ; class TranslatableView extends Component { foo () { // do something important } render () { const { t } = this .
  • components: Components that need to have namespaces loaded.
  • import React from ‘ react ‘ ; import ReactDOM from ‘ react-dom ‘ ; import { I18nextProvider } from ‘ react-i18next ‘ ; import App from ‘ .
  • Higher-order components and components for React when using i18next .
  • Interpolate : component that allows to interpolate React Components or other props into translations.

Contribute to react-i18next development by creating an account on GitHub.

@adrirai: My favorite #i18n #npm module for @reactjs => #react-#i18next
The most efficient and understandable solution to use!

.babelrc rebuild 1.8.0 prepare Aug 19, 2016

.gitignore Handle i18next added and removed resource events. Jul 4, 2016

.travis.yml chore(travis): add test coverage Sep 8, 2016

If you don’t use a module loader it will be added to

import React from ‘react’; import ReactDOM from ‘react-dom’; import { I18nextProvider } from ‘react-i18next’; import App from ‘./App’; // your entry page import i18n from ‘./i18n’; // initialized i18next instance ReactDOM.render( < /I18nextProvider>, document.getElementById(‘app’) );

{ withRef: true }

{ translateFuncName: ‘someFunctionName’ }

t

{ withRef: false, // store a ref to the wrapped component translateFuncName: ‘t’, // will change the name of translation prop default ‘t’ wait: false, // delay rendering until translations are loaded bindI18n: ‘languageChanged loaded’, // which events trigger a rerender, can be set to false or string of events bindStore: ‘added removed’ // which events on store trigger a rerender, can be set to false or string of events }

import React from ‘react’; import { translate } from ‘react-i18next’; function TranslatableView(props) { const { t } = props; return (

{t(‘keyFromDefault’)}< /h1>

{t(‘anotherNamespace:key.from.another.namespace’, { /* options t options */ })}< /p> < /div> ) } export default translate([‘defaultNamespace’, ‘anotherNamespace’])(TranslatableView);

import React from ‘react’; import { translate } from ‘react-i18next’; function TranslatableView(props) { const { t } = props; return (

{t(‘keyFromDefault’)}< /h1>

{t(‘anotherNamespace:key.from.another.namespace’, { /* options t options */ })}< /p> < /div> ) } export default translate([‘defaultNamespace’, ‘anotherNamespace’], {¬†wait: true })(TranslatableView);

import React, { Component } from ‘react’; import { translate } from ‘react-i18next’; class TranslatableView extends Component { foo() { // do something important } render() { const { t } = this.props; return (

{t(‘keyFromDefault’)}< /h1> < /div> ) } } export default translate([‘defaultNamespace’, ‘anotherNamespace’], { withRef: true })(TranslatableView);

import React, { Component } from ‘react’; import ./TranslatableView; class App extends Component { handleClick() { this.refs.translatedView.foo(); } render() { return (

GitHub