Language Switcher in React

by Faisal Khan Janjua

HTML

<div id="app"></div>

CSS

body {
  background: #F0F0F0;
  padding: 20px;
  font-family: Helvetica;
}
.langSwitcher {
  display: flex;
  margin: 0 auto;
  max-width: 130px;
}
.langSwitcher span {
  z-index: 1;
  width: 50%;
  cursor: pointer;
  overflow: hidden;
  padding: 10px 16px;
  text-align: center;
  position: relative;
}
.langSwitcher span:nth-child(1) {
  border-radius: 3px 0 0 3px;
  border: 1px solid #444;
  border-right: none;
}
.langSwitcher span:nth-child(2) {
  border-radius: 0 3px 3px 0;
  border: 1px solid #444;
  border-left: none;
}
.langSwitcher span:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  position: absolute;
}
.langSwitcher span.active {
  color: #FFF;
  cursor: default;
  border-color: #B90016;
}
.langSwitcher span.active:after {
  background-color: #B90016;
}

React

const Messages = {
    "welcomeNote": {
        "en": "Welcome",
        "ur": "خوش آمدید"
    },
    "newNote": {
        "en": "something here",
        "ur": "کچھ اور"
    }
};

function GetText(field) {
    let lang = localStorage.getItem("lang");
    let tr = 'en';
    lang === '1' ? tr = 'en' : lang === '2' ? tr = 'ur' : tr = 'en';
    return field[tr];
}

class LangSwitcher extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lang: localStorage.getItem("lang") ? localStorage.getItem("lang") : '1'
    }
  }
  switchLanguage = () => {
    if (this.state.lang === '1') {
      this.setState({ lang: '2' });
      localStorage.setItem("lang", '2');
    }
    else {
      this.setState({ lang: '1' });
      localStorage.setItem("lang", '1');
    }
  }
  render() {
    const lang = this.state.lang;
    return (
      <div className="langSwitcher" onClick={this.switchLanguage}>
        <span className={lang !== '2' ? 'active' : null}>Eng</span>
        <span className={lang === '2' ? 'active' : null}>اردو</span>
      </div>
    );
  }
}


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    if (localStorage.getItem("lang") == null) {
      localStorage.setItem("lang", '1');
    }
    return (
      <div>
        <LangSwitcher />
        <h1>{GetText(Messages.welcomeNote)}</h1>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById("app")).render( <App /> );