Skip to content

Instantly share code, notes, and snippets.

@debabrata100
Created October 18, 2019 18:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save debabrata100/8b80aafa6166f42b78c3ebd43e14b5a7 to your computer and use it in GitHub Desktop.
Save debabrata100/8b80aafa6166f42b78c3ebd43e14b5a7 to your computer and use it in GitHub Desktop.
On Change of locale save to react state and store locale value to localStorage
import React, { useState } from 'react';
import './App.css';
const defaultLocale = localStorage['locale'] ? localStorage['locale'] : 'en'; // English is default locale if none is set
const localeList = [
{ name: 'English', code: 'en', lang: 'English' },
{ name: '中文', code: 'zh', lang: 'Chinese' },
{ name: 'русский', code: 'ru', lang: 'Russian' },
{ name: 'Française', code: 'fr', lang: 'French' }
];
function App() {
const [currentLocale, setCurrentLocale] = useState(defaultLocale);
const onChangeLanguage = (e) => {
const selectedLocale = e.target.value;
setCurrentLocale(selectedLocale);
localStorage.setItem('locale',selectedLocale)
}
return (
<div className="App">
<h1>Localization in Create React App</h1>
<select onChange={onChangeLanguage} defaultValue={currentLocale}>
{
localeList.map((locale,index)=>(
<option key={index} value={locale.code}>{locale.name}</option>
))
}
</select>
<footer>Love you 3000 <span>&spades;</span></footer>
</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment