artis101 / react-redux-i18n Goto Github PK

Hi,

I have component which contain load data in useEffect and render menu + language selector.

const Layout = ({loadCurrencies, loadLanguages, loadMessages}: Props): ReactNode => {

  useEffect(() => {
       // this is called with every language change
      loadCurrencies();
      loadLanguages();
      loadMessages();
  }, []);

return (
<>
   <MyMenu />
   <MyLanguageSelect />
</>
);

}

I am facing to problem with change language. Every language change trigger useEffect in my Layout component which is performance difficulty and application get stuck for a moment.

Did somebody solve similar problem?

Hi Artis,

Could you please share your plans on updating react-i18nify to version 2?

Hi!
How can I handle the fallback of the language?
Example:

1. I want to translate Common.stringToTranslate
2. react-redux-i18n does not find the string to translate
3. react-redux-i18n shows the fallback hard coded string

i need a component like this
<Translate value="Common.stringToTranslate" fallback="this is the fallback string" />

is it possible to restrict certain URL's to be localized?

Hi, this library is awesome. I am wondering, is there anyway to get the current locale name???

hey! for some reason I can not create PR.

please verify and add update code when you get a chance:

in method "syncTranslationWithStore" replace

store.getState().i18n
to

store.getState().i18n ? store.getState().i18n.translations : store.getState().toJS().i18n.translations;

Hi When I use this:

I18n.t('dialog.contentComponent.componentType.picture')

Language switching is not possible any more.

I have this:

import {applyMiddleware, combineReducers, createStore} from "redux";
import thunk from "redux-thunk";
import {i18nReducer, loadTranslations, setLocale, syncTranslationWithStore} from "react-redux-i18n";

import {de} from "../locales/de";
import {en} from "../locales/en";
export const translationsObject = {
    de: de,
    en: en
};

const store = createStore(
    combineReducers({
        i18n: i18nReducer
    }),
    applyMiddleware(thunk)
);
syncTranslationWithStore(store);
store.dispatch(loadTranslations(translationsObject));
store.dispatch(setLocale('de'));
export default store;

and this for switching

    changeLanguage= (e) => {
        console.log("Change Language");
        e.preventDefault();
        if (store.getState().i18n.locale === "de") {
            store.dispatch(setLocale('en'));
        } else {
            store.dispatch(setLocale('de'));
        }
    };

Hi,

I would like to add some return line in html tag with
like the example :

two_lines: 'Line 1<br />Line 2'

But when I display the content of this translation key, it's also rendering the html tags as text in the browser. Why ?

As we don't use the library day to day anymore, unfortunately we can't meet the proper maintenance requirements. To keep the project rolling, we're looking for a new maintainer (and owner).

If you're interested in taking over the project, please reach me by [email protected] or original project author - Gerben [email protected]

My name is Artis and I'm the maintainer of this repo. I created it as a fork for my client I did contract work for. My contract ended and I forgot about this repo, abandoning it completely. I wonder if people are still using it and would like to receive updates?

I'm using react-native with redux, here is my code :

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { i18nReducer, loadTranslations, setLocale, syncTranslationWithStore } from 'react-redux-i18n';
import { AsyncStorage } from 'react-native';
import { translationsObject } from '../i18n-config';
import rootReducer from '../reducers/index';

export default function configureStore() {
  const receiveLoginDetails = (value) => {
    if (value === null) {
      // default language
      AsyncStorage.setItem('appLang', 'fr')
        .then((value2) => {
          store.dispatch(setLocale(value2));
        });
    } else {
      store.dispatch(setLocale(value));
    }
  };

  const store = createStore(
    combineReducers({
      rootReducer,
      i18n: i18nReducer,
    }),
    applyMiddleware(thunk),
  );

  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(require('../reducers/index')));
  }
  syncTranslationWithStore(store);
  store.dispatch(loadTranslations(translationsObject));
  AsyncStorage.getItem('appLang').then(receiveLoginDetails);
  return store;
}

When I switch language I need to reload app to see the strings change.

I understand that the language can be changed by changing the store.dispatch(setLocale('nl'));

But how do I switch locale on user's request? For example:

<a href="/nl" onClick={changeLanguage('nl')}>NL
<a href="/en" onClick={changeLanguage('en')}>EN

How to change setLocale for all the components, when clicking the different language links?

Is that possible to translate on the fly a group of strings, for instance, assuming a list of fruits :
['banana', 'apple', 'apricot', 'pineapple'] to the equivalent list in another language ?
A specific use case, would be Dropdown lists, for which rendering is updated if the user selects another language.

How can I pass inside t() function argument with locale value, for exception cases?

t(key, {locale: locale-key})

Hi,
I'm using the I18n.t helper and when I make a dispatch(setLocale('fr')) it does change the I18n language, but it doesn't re-render all the text using it.
Anyone got an Idea how to make it work?

Hi there your work is really cool..But i have an issue.i have to issue an action which changes the locale at runtime.the action fires correctly and changes the state tree accordingly but the view isnt updated unless i refresh the page.Is there a way to achieve this dynamically? thank you

Hi,

In our web application based on Redux and React, we have a drop down to change dynamically of language. component refresh workd fine. But as you mentionned in the readme file, I18n.t helper refresh is up to us.
Actually, we use this helpers for tooltips like this :

< li title={I18n.t("application.tooltip.displayRecent")}>
< Translate value="application.navigation.navRecent"/>
< /li>

How can we handle the refresh for helpers ?

Thanks

I am relatively new to this package but I have noticed that every time I re-render the page the locale variable shows up before the text (value) and it causes a flicker. Does anyone else have this issue? We are using it on our React webpage.

Has anyone used this for a real large project that might need to support multiple different languages? I find it hard to believe that having all your translations inline in app.js is sustainable on a large scale. I would like to separate my translation files by component for maximum portability and modularization (I understand the overhead this adds to the task of translating), but I'm not sure how best to do that with this package.

Code is alright, but built version was not updated, so we have broken code on npm now.
#18

Needed to be updated on npm

Hi.
Please, one small example...One small example is better then 100 words...

translation = {
  en: {
    common: {
    }
  },
  ko: {
    common: {
      helloWorld: '안녕하세요',
    }
  }
}

When translation object is given like above and locale is en,
I18n.t('common.hello') is suppose to return 'Hello World'.

But with react-i18nify 1.11.2 the result is 'helloWorld'.
After force-downgrade react-i18nify 1.8.8 works fine.

Can I separate my translation files by language and start the component through this folder setting the locale? For example: file.pt-BR.json, file.en-US.json...

Best Regards,

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I am not sure why this error is happening. Looks like something to do with the configuration of i18n.

The line at translate.js:63 is:

namespaces = namespaces || _this.i18n.options.defaultNS;

Where do the i18n options get configured? Am I configuring something wrong with my reducer?

Hi
Under which license is this library available? Could you please add a LICENSE.txt file?
Thanks in advance

Thanks for your great i18n library.
I tried and worked fine.
But I have the following warning message on Google Chrome Console.
Could you confirm that?

Warning: You are manually calling a React.PropTypes validation function for the value prop on t. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

<Translate var={<a href="/aaa/a"}>LINK</a>} value={dynamicKey${index}} />

react-i18nify needs a patch to prevent overwriting dynamic placeholders

en : {
  really: {
    deeply: {
      nested: {
        name1: 'You are %{age} years old',
      },
    }
  }
}

t('really.deeply.nested', { age: 30 }).name1 // You are 30 years old
t('really.deeply.nested', { age: 20 }).name1 // You are 30 years old

expected // You are 20 years old

sealninja/react-i18nify#38

Hey, Great work im trying to run this code under redux-saga but i got severals erros when im trying to dispatch cause of the plain objects, do u have any suggestion, thx in advance, im kinda new on this

Using <Localize value={value} dateFormat="LTS" /> does not return 01.01.2018 12:16:20 PM as expected from moment.js documentation.
It returns 01.01.2018t20 (as using L and S key separately with t as string constant).

Hello,

Still using this lib ;)

I was wondering if it is possible to add the possibility to set an initialState to the reducer, so that loadTranslations and setLocale action don't have to be called immediately after store create which doesn't really make sense in the redux philosophy IMHO.

Here's how it would look like:

export const i18nReducerWithInitialState =  initialState = {} => {
  return (state = initialState, action) => {
    // ...
  }
}

export default i18nReducerWithInitialState({}); // for backward compatibility, 

and it would be called like:

import { combineReducers } from 'redux';
import {i18nReducerWithInitialState} from 'react-redux-i18n';
import translations from 'myproject';

const defaultLocale = 'en';

const combinedReducers = combineReducers({
  user: userReducer,
  i18nReducerWithInitialState({locale: defaultLocale, translations}),
});

In Firefox mobile browser Chinese (Traditional & simplified) is not showing, instead, the key is shown.
Tested in the latest firefox browser version. No issue with other languages.

Thanks & Regards

Hi!

Thanks for this awesome plugin.
I'm looking for the best solution for this case:

<Translate dangerousHTML value="I want to click <a href="#" onClick={()=>(make something)}>here to do something."

Right now, dividing the sentence into 3 parts is the only way I can handle it, is there any possibility to add props or something to make events?

I'm using the react-redux-i18n extension to translate my strings ...

for that I do the following stuff:

var T = require('react-redux-i18n').Translate;
and to translate a string in view I have this:

<p><T value="processes.new.description"/></p>
That works fine.

But Now is the question how to use it in react-toolbox Inputs and so on ...

For example this is not working:

<Input type='text' label={<t value="processes.new.inputTitle" />} name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
The label is not printed ... whats the problem?

Thanks.

how use react-redux-i18n in redux-dynamic-modules ?
https://github.com/Microsoft/redux-dynamic-modules/tree/master/packages/widgets-example

pls help me

I'm facing a strange error when trying to build a react-native in release mode (prod env). Note: dev build works.

/Users/**/myapp/node_modules/react-redux-i18n/build/index.js: [BABEL] 
/Users/**/myapp/node_modules/react-redux-i18n/build/index.js: Unknown option: 
/Users/**/myapp/node_modules/react/index.js.Children. 
Check out http://babeljs.io/docs/usage/options/ for more information about options.

From a research, I understand that babel doesn't know how to import Children or React from react in this file: react-redux-i18n/build/index.js, which doesn't contain any react import.

Does someone has an idea?

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "@src": "./src",
        "@App": "./src/App.js",
        "@config": "./src/config.js",
        "@common": "./src/common",
        "@utilities": "./src/common/utilities",
        "@flow-types": "./src/flow-types",
        "@styles": "./src/styles",
        "@components": "./src/components",
        "@pages": "./src/components/pages",
        "@forms": "./src/components/forms",
        "@fields": "./src/components/fields",
        "@ui": "./src/components/ui",
        "@hoc": "./src/hoc",
        "@actions": "./src/actions",
        "@actionsTypes": "./src/actions/actionsTypes",
        "@selectors": "./src/selectors"
      }
    }]
  ],
  "env": {
    "development": {
      "plugins": [
        [
          "flow-react-proptypes",
          { "ignoreNodeModules": true }
        ]
      ]
    }
  }
}

package.json

"react": "16.2.0",
"react-native": "0.53.3",
"react-redux-i18n": "^1.9.2",


"babel-plugin-flow-react-proptypes": "^19.1.0",
"babel-plugin-module-resolver": "^3.1.0",
"babel-preset-react-native": "4.0.0",

Hey man, nice library!
I've seen that you don't use Flux Standard Actions (https://github.com/acdlite/flux-standard-action). I think it is a consistent pattern to follow, and a lot of folks use it. Do you think it can be possible to change your actions to FSAs?
I can create the PR, it's a quick job 😄

It's recommended to update react-i18nify dependency to 1.9.1, where react dependency was added to peerDependencies. It will avoid duplications of react lib in my project, since we use react@^16

export const loadTranslations = translations => dispatch => { I18n.forceComponentsUpdate(); dispatch({ type: LOAD_TRANSLATIONS, translations, }); };

I18n.forceComponentsUpdate should be fired after action dispatch. Or better solution component should listen store on LOAD_TRANSLATION action and then fire forceComponentsUpdate.

var I18n = require('react-redux-i18n').I18n;

I used this helper and when I change language it does not change language of another component's content until another event triggers (does not make hot change.

If you tell me how I can get text instead of span element inside the Translate component I will get over my problem.
Thanks.