viamobi-component
Version:
A React component that viamobi
58 lines (44 loc) • 1.6 kB
Markdown
> Hi! It is a guide where you can learn how to use the i18next library.
- The idea is not to use this library in its logic, but you can call it in development mode, to avoid conflicts. The idea is that it is only called at the startup of the father.
> Example of application startup:
```Js
import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import './i18n';
ReactDOM.render(<Suspense fallback="Loading...">
<RootSession />
</Suspense>,
document.getElementById('root')
);
```
- Configuration in i18n:
```Js
i18n
.use(Backend) // passes i18n down to react-i18next
.use(initReactI18next)
.init({
debug: true, // mode debug
lng: "en", // language default
fallbackLng: "en",
ns:['exampleSum'], // you can rename the file and pass it to any file in this array
defaultNS:'exampleSum', // Default traduction file
interpolation: {
escapeValue: false // react already safes from xss
},
backend: {
// You can change the URL of the translation repository.
// loadPath: `${process.env.REACT_APP_BUCKECT_LANGUAGE_URL}/locales/{{lng}}/{{ns}}.json`
loadPath: `/locales/{{lng}}/{{ns}}.json`
},
});
```
- When you use the translation in your logic, implement it like this:
> To use a specific translation file, go to the main name of the file (nameSpace)
```Js
import { useTranslation } from "react-i18next";
const { t } = useTranslation('exampleSum');
```