Questions concerning React implementation of i18next library.
Here are some react i18n links you might find helpful.
Questions tagged [react-i18next]
650 questions
52
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
- 17,489
- 35
- 150
- 263
37
votes
4 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…
Knut Holm
- 3,988
- 4
- 32
- 54
27
votes
6 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
- 28,742
- 61
- 158
- 247
27
votes
5 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
- 72,281
- 52
- 227
- 295
23
votes
6 answers
i18next bold text in the middle of a translation
I have a static file called translations.json which includes my translations:
{
"common": {
"greeting": "We will see you at NEW YORK in the morning!"
}
}
Within my react code, ive been use doing somethign along the lines…
Syn
- 938
- 1
- 10
- 21
23
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
- 706
- 1
- 9
- 31
23
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,928
- 3
- 18
- 27
21
votes
5 answers
next-i18next Jest Testing with useTranslation
Testing libs...always fun. I am using next-i18next within my NextJS project. We are using the useTranslation hook with namespaces.
When I run my test there is a warning:
console.warn
react-i18next:: You will need to pass in an i18next instance by…
Phil Lucks
- 2,704
- 6
- 31
- 57
20
votes
6 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
- 201
- 1
- 2
- 4
18
votes
6 answers
react-i18next:: You will need to pass in an i18next instance by using initReactI18next warning thrown in Jest unit test
I am using react-i18next in my app to great effect but when I run the unit tests against my component:
const OptionList = ({
definition,
name,
status = EMutationStatus.IDLE,
onChange = () => null,
value = [],
}: IOptionListProps):…
RyanP13
- 7,413
- 27
- 96
- 166
14
votes
2 answers
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
- 715
- 4
- 11
- 29
14
votes
2 answers
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
- 173
- 1
- 2
- 11
13
votes
5 answers
i18n.changeLanguage is not a function
This is my code.
import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
function Page() {
const { t, i18n } = useTranslation();
const changeLanguage = lng => {
i18n.changeLanguage(lng);
};
return…
user12145676
12
votes
1 answer
how do I interpolate a Link component in Next-i18next / React i18next that changes position in the text
Currently I'm using Next.js with Next-i18next for I18N, but I understand that the React/i18next implementation is basically the same.
The problem I'm having is that I need to interpolate a next Link component inside some translation text, but…
HJEC
- 400
- 3
- 11
12
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
- 3,034
- 5
- 30
- 46