16
loading...
This website collects cookies to deliver better user experience
I18next is an internationalization framework written in and for JavaScript. But it's much more than that. I18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
react-i18next is a powerful internationalization framework for React / React Native which is based on i18next. The module provides multiple components eg. to assert that needed translations get loaded or that your content gets rendered when the language changes.
npx create-react-app react-i18next-example
npm install react-i18next i18next --save
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
const resources = {
en: {
translation: {
"Welcome to React": "Welcome to React and react-i18next"
}
},
fr: {
translation: {
"Welcome to React": "Bienvenue à React et react-i18next"
}
}
};
i18n
.use(initReactI18next)
.init({
resources,
lng: "en",
interpolation: {
escapeValue: false
}
});
export default i18n;
i18n.use(initReactI18next)
we pass the i18n instance to react-i18next which will make it available for all the components via the context API.import React, { Component } from "react";
import ReactDOM from "react-dom";
import './i18n';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById("root")
);
import "./styles.css";
import { useTranslation } from "react-i18next";
export default function App() {
const { t } = useTranslation();
return (
<div className="App">
<h1>{t("Welcome to React")}</h1>
</div>
);
}
import React from 'react';
import { useTranslation } from 'react-i18next';
const MyComponent = () => {
const { t } = useTranslation();
return <h1>{t('Welcome to React')}</h1>
}
import React from 'react';
import { withTranslation } from 'react-i18next';
const MyComponent = ({ t }) => {
return <h1>{t('Welcome to React')}</h1>
}
export default withTranslation()(MyComponent);
import React from 'react';
import { Translation } from 'react-i18next';
const MyComponent = () => {
return (
<Translation>
{
t => <h1>{t('Welcome to React')}</h1>
}
</Translation>
)
}
export default MyComponent;
<strong>
.import React from 'react';
import { Trans } from 'react-i18next';
const MyComponent = () => {
return <Trans><H1>Welcome to React</H1></Trans>
}
export default MyComponent;
"<0>Welcome to React</0>": "<0>Welcome to React and react-i18next</0>"
{
"key": "{{what}} is {{how}}"
}
import "./styles.css";
import { useTranslation } from "react-i18next";
export default function App() {
const { t } = useTranslation();
return (
<div className="App">
<h1>{t("key", { what: "interpolation", how: "great" })}</h1>
</div>
);
}
{
"key": "I am {{author.name}}"
}
author
data to the interpolation.import "./styles.css";
import { useTranslation } from "react-i18next";
export default function App() {
const { t } = useTranslation();
const author = {
name: 'Brayan',
github: 'Arrieta'
};
return (
<div className="App">
<h1>{t("key", { author })}</h1>
</div>
);
}