-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
example of dynamically changing the definiotn #26
Comments
If you use the const English = {hello: 'Hello'};
const Italian = {hello: "Ciao"};
class App extends Component {
state = {
definition: English
}
componentDidMount() {
setInterval(() => this.setState({definition: this.state.definition === English ? Italian : English}), 1000);
}
render(props, {definition}) {
return (
<IntlProvider definition={definition}>
<Text id="hello" />
</IntlProvider>
);
}
} In a more real-world scenario, you would get the desired language file "key" from something like a users preferences or the browsers language preference, dynamically lazy-load/require the language file, and update state appropriately with the new language file, triggering a rerender. Something like this: import defaultLanguage from '../languages/en-us.json';
class App extends Component {
state = { definition: defaultLanguage };
componentWillMount() {
let key = ??? //get preferred language file key somehow
//use webpack dynamic import if you have all of your language files at build time - could also use fetch or another mechanism to get a remote file if you don't have them at build time
import(`../languages/${key}.json`).then(definition => this.setState({definition}));
}
render(props, {definition}) {
<IntlProvider definition={definition}>
<Text id="hello" />
</IntlProvider>
}
} See more about webpack dynamic imports here: https://webpack.js.org/guides/code-splitting/#dynamic-imports |
This would be good to add to the README. If anyone wants to clean it up and update it, that would be helpful |
thanks @billneff79 , great example. |
@OrenMe - you can have nested The typical pattern that we use is that each widget we export from a repo is wrapped in an An alternative you could pursue is a publish-subscribe mechanism (e.g. using Either way, if you find something that works for you, we'd love to hear about it. Good luck! |
thanks @billneff79 ! |
Is this possible? can you add a sample of how to dynamically change the definition and thus causing a refresh of the text nodes in all of the children.
thanks.
The text was updated successfully, but these errors were encountered: