Comments (11)
@ryandrewjohnson opened in #79. I appreciate you accommodating my contribution efforts 😄
from react-localize-redux.
@thchia if you have time to do a PR with some tests covering the issue that would be much appreciated. I'm just getting things wrapped up with the v3.0 launch, so if you're able to tackle this before I release on Monday that'd be amazing.
from react-localize-redux.
from react-localize-redux.
🎉 Release candidate is ready!!! 🎉
For those that wish to try out v3.0.0
:
npm install react-localize-redux@beta --save
To run the basic example, run the following from the root of /examples/basic
directory:
npm install
npm start
If you are coming from v2.x.x
a migration guide to go from v2 to v3 is in the works as well.
Lastly if you find any bugs please open an issue, and be sure to mention the release candidate version you are on.
from react-localize-redux.
i am using "react-localize-redux": "^3.0.0-rc3". but i could not find <LocalizeProvider />
as mentioned in given office docs link. BTW, basic example link is also not working.
from react-localize-redux.
@priyankmtr can you elaborate on what you mean by "I could not find" <LocalizeProvider />
? I just installed the react-localize-redux": "^3.0.0-rc3
and ran the demo, and it appears to work fine.
Also I've updated the broken basic example link.
from react-localize-redux.
Hi @ryandrewjohnson, Thanks for fixing the link. I got it now. It is working good. But when i am trying to include localeReducer in rootReducer, i am getting the issue, that i have shown in the attached image. Kindly pardon me if there is something wrong from my end. I am new to reactJS.
package.json:-
"devDependencies": {
"@types/enzyme": "^3.1.10",
"@types/enzyme-adapter-react-16": "^1.0.2",
"@types/history": "4.6.0",
"@types/jest": "^22.2.3",
"@types/node": "^9.6.14",
"@types/prop-types": "15.5.2",
"@types/react": "^16.3.14",
"@types/react-dom": "16.0.4",
"@types/react-hot-loader": "^3.0.6",
"@types/react-redux": "5.0.8",
"@types/react-router": "^4.0.25",
"@types/react-router-dom": "^4.2.6",
"@types/redux": "^3.6.0",
"@types/webpack-env": "1.13.0",
"aspnet-webpack": "2.0.1",
"aspnet-webpack-react": "3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"identity-obj-proxy": "^3.0.0",
"isomorphic-fetch": "2.2.1",
"jest": "^22.4.3",
"jest-trx-results-processor": "0.0.7",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"raf": "^3.4.0",
"style-loader": "0.18.2",
"ts-jest": "^22.4.5",
"tslint": "^5.10.0",
"tslint-microsoft-contrib": "^5.0.3",
"tslint-react": "^3.6.0",
"typescript": "^2.8.3",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"@types/js-cookie": "^2.1.0",
"@uifabric/icons": "5.7.1",
"deep-object-diff": "^1.1.0",
"enzyme": "3.3.0",
"js-cookie": "^2.2.0",
"office-ui-fabric-core": "9.6.0",
"office-ui-fabric-react": "5.89.0",
"react": "16.2.0",
"react-dom": "16.2.0",
"react-hot-loader": "3.1.3",
"react-redux": "^5.0.7",
"react-router-dom": "4.2.2",
"redux": "^4.0.0",
"typescript-string-operations": "^1.3.1"
},
The difference between example and my application is, my application is using typescript. thanks.
from react-localize-redux.
I tried to go with the way shown in the official docs.
import { LocalizeProvider } from 'react-localize-redux';
in my routes.tsx file. It is showing me error, that this module has no exported member 'LocalizeProvider'.
from react-localize-redux.
@priyankmtr are you sure that you have installed the library? It doesn't show up in your dependencies, and if you use npm > v5 it should autosave.
from react-localize-redux.
@priyankmtr it looks like the type definition was missing for LocalizeProvider
--- good catch. I don't actually use TypeScript in my project so maintaining the type definition is troublesome. If you find anything else please feel free to update the type definition and send a PR.
I have published an updated release candidate that can be installed like so:
npm install react-localize-redux@beta --save
from react-localize-redux.
Quick question regarding the Translate
component. I've noticed this logic regarding whether or not to add the default translation:
// Translate.js
constructor(props: TranslateProps) {
super(props);
this.state = {
hasAddedDefaultTranslation: false
};
}
componentDidMount() {
this.setState({ hasAddedDefaultTranslation: true });
}
addDefaultTranslation(context: LocalizeContextProps) {
if (this.state.hasAddedDefaultTranslation) {
return;
}
...
}
If I use Translate
like this (assume missing translations for both):
export default () => (
{someCondition ?
<Translate id='id_one'>DEFAULT 1</Translate> :
<Translate id='id_two'>DEFAULT 2</Translate>
}
)
addDefaultTranslate
does not get called when someCondition
changes. I think this is because during the React reconciliation process, the component instance is preserved, thus not flushing the state. Since the first default translation was added and state set accordingly, hasAddedDefaultTranslation
remains true
and the second default value is not set.
I can somewhat verify this by adding a key
prop to Translate
, and setting it equal to id
. This forces React to see 2 different component instances, destroy the first Translate
instance and reconstruct the second one, going through the entire component lifecycle again and correctly adding 'DEFAULT 2'
.
I'm not sure how much of an edge case this is considered, or what the best solution is but my initial suggestion would be:
- Implement
componentDidUpdate
and check if theid
prop has changed. - If it has, reset
state.hasAddedDefaultTranslation
and calladdDefaultTranslation
again.
There is possibly another way using getDerivedStateFromProps
(gDSfP) but I'm less familiar with that new API:
- Replace the call in
componentDidMount
with:
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.lastKnownId === nextProps.id) {
return null
}
return { hasAddedDefaultTranslation: false, lastKnownId: nextProps.id }
}
// need to save the last known id in state because you cannot access `this` in gDSfP.
- Inside
addDefaultTranslation
, sethasAddedDefaultTranslation
to true. - I think gDSfP runs before every render, so in the initial mount, when id goes from
undefined
to whatever value it has,addDefaultTranslation
will run. It will then not run until theid
prop changes, whereupon gDSfP resets the state flag and the subsequent render results in a call toaddDefaultTranslation
.
Happy to submit PR.
from react-localize-redux.
Related Issues (20)
- translate function not returning proper type [with CodeSandBox example]
- Translation returns [Object object]
- LocalizeContext not declared in types declaration despite being exported HOT 2
- onMissingTranslation for multiple translations HOT 1
- Translating external components HOT 1
- Falling back to a translation that has html in it causes a crash
- Unit test for the Translate Component in Demo HOT 1
- [Bug] onMissingTranslation is a non-serializable value HOT 1
- Translate component not working with options { defaultLanguage: "XX" }
- License issue with dependency: create-react-context ^0.2.2 (resolves to 0.2.3) HOT 1
- Denial of Service Node Fetch HOT 1
- Fallback option for default language when using translate() function
- Performance with big translation file HOT 1
- Getting value to populate to render block without triggering warning
- Import "InitializePayload" fails in esbuild (e.g. when using Vite) HOT 3
- Update react peer dependency HOT 4
- Type mismatch when using redux toolkit with Typescript
- Vulnerabilities in the latest react-localize-redux HOT 8
- Localize.on "initialize" never fires
- This package is dead, replacement?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-localize-redux.