react-i18next

React i18next Backend-Path different in local and production environment

由 青春壹個敷衍的年華 提交于 2021-02-10 06:56:12
问题 I'm using a react app with react-i18next and loading the translation with i18next-xhr-backend i18n .use(Backend) .use(initReactI18next) // passes i18n down to react-i18next .init({ lng: "de", backend: { loadPath: '/static/locales/{{lng}}/{{ns}}.json' } }); If I run it locally my app is served over http://localhost:3000/ and the translation file is also loading nicely (src is located in public/statuc/locales/ ) http://localhost:3000/static/locales/de/translation.json I'm now facing the issue

i18next translation outside component

由 為{幸葍}努か 提交于 2021-02-07 14:43:35
问题 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 create-react-app and it's default settings for folders reference, maybe this is the key problem, but I can't find out why and what to change. import i18n from '../../i18n'; const navigation = [ { 'id' : 'dashboard', 'title' : i18n.t('analytics.title', 'NOT

How to type check i18n dictionaries with TypeScript?

由 Deadly 提交于 2021-02-04 17:29:12
问题 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" }, "header": { "logo": "Logo", "link": "Link", }, } If I provide non-existent key, TS should blow up: const { t } = useTranslation(); <span> { t('footer.copyright') } </span> // this is OK, because footer.copyright exists <span> { t('footer.logo') } </span> //

How to type check i18n dictionaries with TypeScript?

由 人走茶凉 提交于 2021-02-04 17:29:06
问题 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" }, "header": { "logo": "Logo", "link": "Link", }, } If I provide non-existent key, TS should blow up: const { t } = useTranslation(); <span> { t('footer.copyright') } </span> // this is OK, because footer.copyright exists <span> { t('footer.logo') } </span> //

Unable to use JSON from S3 buck in i18next

由 早过忘川 提交于 2021-01-29 12:32:54
问题 This is how my i18n file looks like - import i18n from 'i18next' import { initReactI18next } from 'react-i18next' import HttpApi from 'i18next-http-backend'; i18n .use(HttpApi) .use(initReactI18next) .init({ // resources: resourcesObj, initImmediate: false, backend: { loadPath: 'https://bucketlink.amazonaws.com/locales/{{lng}}/{{ns}}.json', crossDomain: true, allowMultiLoading: true, }, lng: "en", fallbackLng: "en", debug: false, ns: ["translations"], defaultNS: "translations", keySeparator:

react-i18next doesn't translate

由 允我心安 提交于 2021-01-29 05:59:02
问题 I have tryed to implement react-i18next to my react application but it doesn't give a f... that I want it to work Console doesn't show any error. It just doesn't translate. Anyone had similar problem and can help me figure out why it doesn't translate? my i18n.js file content: import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import translationPL from './translations/pl/common.json'; const resources = { pl: { translation: translationPL } }; i18n .use

Cannot get react-i18next to read JSON files via FETCH backend

由 这一生的挚爱 提交于 2021-01-29 03:42:55
问题 I'm trying to use react-i18next on the client using the i18next-fetch-backend , and even though I can get to the JSON translation files via a browser, something is screwy with how they're being handled during the init routine. For the record, I'm using create-react-app as the basis of my front-end React application, if that makes a difference, and so far all of my testing is in localhost (with the React app on localhost:3000, and the "server" on localhost:8000). Here's my init file: import

react-intl vs react-i18next for ReactJS internationalization (i18n) [closed]

由 十年热恋 提交于 2019-12-09 04:30:58
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . 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 libraries: reac-intl and react-i18next What would be the advantages between

react-i18next not loading json translation files in React app created with create-react-app

由 大兔子大兔子 提交于 2019-12-04 08:20:44
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 'i18next-browser-languagedetector'; import XHR from 'i18next-xhr-backend'; i18n .use(XHR) .use(LanguageDetector) .init({ debug: true, lng: 'en', nsSeparator: false, keySeparator: false, fallbackLng: false, backend: { loadPath: 'locales/{{lng}}/{{ns}}.json' } }); export default i18n; I'm getting this error: i18next::backendConnector: loading

react-intl vs react-i18next for ReactJS internationalization (i18n) [closed]

由 心已入冬 提交于 2019-12-03 09:28:14
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 libraries: reac-intl and react-i18next What would be the advantages between one and another ? What is the most supported and popular one ? What is the general choice for a ReactJS application supporting multiple languages ? jamuhl @whyp's response is not taking into account react-i18next is part of i18next which has additional 2100 stars (without having a huge
订阅 react-i18next