Questions concerning React implementation of i18next library.
Questions tagged [react-i18next]
352 questions
42
votes
3 answers
react-intl vs react-i18next for ReactJS internationalization (i18n)
I need to build a multilanguage application using ReactJS. The application needs a custom dictionary for different languages as well as automatic formatting of date/time, numbers and currency.
From all I´ve seen there are 2 very popular…
Mendes
- 13,757
- 24
- 122
- 217
21
votes
5 answers
How do I use react-i18next with a connected component
I would like to use react-i18next with my react-redux connected component and am not sure how to go about it.
I've simplified my code to show an example of a connected component:
import React from 'react';
import {connect} from 'react-redux';
import…
mdebeus
- 1,838
- 1
- 17
- 26
17
votes
3 answers
react-i18next: interpolation of link in HTML tag in the middle of the text
I am using react, i18next and react-i18next. I would like to have some translatable text with HTML link in the middle of the text which is interpolated in react, something like this:
This is my text with a beautiful link in…
knuhol
- 3,636
- 4
- 27
- 53
16
votes
5 answers
Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified
I am trying to get I18N working using react-i18next. I am following the steps provided here as close as possible. I have tried for several hours with lots of googling around and have not yet discovered what I am doing wrong. Any help is…
Michael Margozzi
- 161
- 1
- 4
13
votes
1 answer
React + i18next: Why aren't my nested keys working?
I am using ReactJS for a small website. I decided to use i18next for the internationalization and it works - unless I use a nested reference for the translation key.
In the following example the intro1 and intro2 key are displayed, but…
Faire
- 414
- 6
- 21
13
votes
3 answers
How do I mock react-i18next and i18n.js in jest?
package.json
"moduleNameMapper": {
"i18next": "/__mocks__/i18nextMock.js"
}
i18n.js
import i18n from 'i18next'
import XHR from 'i18next-xhr-backend'
// import Cache from 'i18next-localstorage-cache'
import LanguageDetector from…
chovy
- 59,357
- 43
- 187
- 234
9
votes
4 answers
Using react i18next on all nested components
I have a question regarding the multi-language support for complex React application.
All examples and documentation are based on "flat" application without nested/child components.
How to approach data nested like this:
…
J33nn
- 2,784
- 4
- 24
- 43
8
votes
1 answer
React-i18next suspense
I m using React-i18next just like the example
import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
function App() {
return (
);
}
But…
Cheung Brian
- 655
- 2
- 11
- 24
8
votes
3 answers
How to type check i18n dictionaries with TypeScript?
Is there a possibility to type check existing keys in react-i18next dictionaries? So that TS will warn you during compile time if key doesn't exist.
Example.
Suppose, we have this dictionary:
{
"footer": {
"copyright": "Some copyrights"
},
…
Green
- 21,978
- 45
- 138
- 223
7
votes
2 answers
React i18next useTranslation Hook in helper method
I'm using React with react-i18next
My index.tsx File contains some components and I can use the Translation function there
index.js
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom';
import * as utils from './Utils';
import…
Evil_skunk
- 2,255
- 2
- 24
- 30
7
votes
2 answers
react-i18next not loading json translation files in React app created with create-react-app
I've created a React application with create-react-app
I want to implement translations and I've discovered react-i18next
After installing required packages I've setup my i18n.js config file:
import i18n from 'i18next';
import LanguageDetector from…
Cristian Rojas
- 2,288
- 5
- 25
- 37
6
votes
1 answer
i18next translation outside component
I'm new for i18next, trying to localize/translate website. Everything works for translation inside of component, but outside (means json files with i18n.t() it doesn't retrieve needed information, instead showing default value.
I'm using…
Osia
- 93
- 1
- 10
6
votes
1 answer
"i18next backendConnector: loading namespace failed" when using react-i18next useTranslationHooks
I'm trying to implement react-i18next on my create-react-app application with useTranslation() hooks.
However, in the console, the debug mode shows
i18next::backendConnector: loading namespace billingAddress for language en failed failed parsing…
WhyINeedToKnowThis
- 117
- 2
- 8
5
votes
1 answer
Where does initialI18nStore come from with react-i18next
I wish there was a little more documentation around the useSSR from react-i18next. In the documentation it states to build a component like this...
import React from 'react';
import { useSSR } from 'react-i18next';
export function InitSSR({…
Bruce Smith
- 630
- 6
- 12
5
votes
2 answers
Picker onValueChange() called twice
I want to support localization using react-18next.
This component shows a Picker, sets a LocalStorage key (the selected language) and change the app language.
I noticed the onValueChange method is called twice. The first call (using a proper…
alfredopacino
- 2,117
- 3
- 25
- 48