Want to implement localization in reactjs? Yahoo has created a package for implementing localization in React. See the below example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import ReactDOM from 'react-dom'; import React, { Component } from 'react'; import LocalizedStrings from 'react-localization'; let strings = new LocalizedStrings({ en:{ how:"How do you want your egg today?", boiledEgg:"Boiled egg", softBoiledEgg:"Soft-boiled egg", choice:"How to choose the egg" }, it: { how:"Come vuoi il tuo uovo oggi?", boiledEgg:"Uovo sodo", softBoiledEgg:"Uovo alla coque", choice:"Come scegliere l'uovo" } }); class App extends Component { constructor(props) { super(props); this.state = { language: 'en' } this.handleLanguageChange = this.handleLanguageChange.bind(this); } handleLanguageChange(e) { e.preventDefault(); let lang = e.target.value; this.setState(prevState => ({ language: lang })) } render() { strings.setLanguage(this.state.language); return ( <div> Change Language: <select onChange={this.handleLanguageChange}> <option value="en">En- English</option> <option value="it">It- Italian</option> </select> <br /><br /> {strings.how} </div> ) } } ReactDOM.render(<App />, document.getElementById('root')); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
