example/locize/src/App.js
function Page() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Welcome />
      </div>
      <div className="App-intro">
        <div>
          <button onClick={() => changeLanguage('de')}>de</button>
          <button onClick={() => changeLanguage('en')}>en</button>
        </div>
        <MyComponent />
      </div>
      <div>{t('description.part2')}</div>
    </div>
  );
}
function Page() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Welcome />
      </div>
      <div className="App-intro">
        <div>
          <button onClick={() => changeLanguage('de')}>de</button>
          <button onClick={() => changeLanguage('en')}>en</button>
        </div>
        <MyComponent />
      </div>
      <div>{t('description.part2')}</div>
    </div>
  );
}
function Page ( ) { const { t , i18n } = useTranslation ( ) ; const changeLanguage = lng => { i18n . changeLanguage ( lng ) ; } ; return ( < div className = "App" > < div className = "App-header" > < img src = { logo } className = "App-logo" alt = "logo" / > < Welcome / > < / div > < div className = "App-intro" > < div > < button onClick = { ( ) => changeLanguage ( 'de' ) } > de < / button > < button onClick = { ( ) => changeLanguage ( 'en' ) } > en < / button > < / div > < MyComponent / > < / div > < div > { t ( 'description.part2' ) } < / div > < / div > ) ; }
page uses the hook
page uses the hook