Quick start
Install needed dependencies
We expect you having an existing react application - if not give create-react-app a try.
Install both react-i18next and i18next packages:
Why do you need i18next package? i18next is the core that provides all translation functionality while react-i18next gives some extra power for using with react.
Do you directly want to see an example?
Check out this basic react example with a browser language-detector and a http backend to load translations from.
Do you like to read a more complete step by step tutorial?
Configure i18next
Create a new file i18n.js
beside your index.js
containing following content:
The file does not need to be named i18n.js
, it can be any other filename. Just make sure you import it accordingly.
The interesting part here is by i18n.use(initReactI18next)
we pass the i18n instance to react-i18next which will make it available for all the components via the context api.
Then import that in index.js
:
If you need to access the t
function or the i18next
instance from outside of a React component you can simply import your ./i18n.js
and use the exported i18next instance:
Also read about this here.
Translate your content
Using the hook
Using the hook in functional components is one of the options you have.
The t
function is the main function in i18next to translate content. Read the documentation for all the options.
Learn more about the hook useTranslation.
Using the HOC
Using higher order components is one of the most used method to extend existing components by passing additional props to them.
The t
function is the main function in i18next to translate content. Read the documentation for all the options.
Learn more about the higher order component withTranslation.
Using the render prop
The render prop enables you to use the t
function inside your component.
Learn more about the render prop Translation.
Using the Trans component
The Trans component is the best way to translate a JSX tree in one translation. This enables you to eg. easily translate text containing a link component or formatting like <strong>
.
Don't worry if you do not yet understand how the Trans component works in detail. Learn more about it here.
Next steps
Depending on your learning style, you can now read the more in-depth step by step guide and learn how to load translations using xhr or how to change the language.
Prefer having code to checkout? Directly dive into our examples:
Would you like to visually check the progress state of your translations?
Last updated