@luongtt/create-react-base/sample/components/Buttons/LanguageSwitcher/index.jsx

This is utility package for create react app base on create-react-app package

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box } from '@mui/material';
import { ButtonUnstyled } from '@mui/base';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const handleChange = (lang) => {
    if (lang !== i18n.language) {
      i18n.changeLanguage(lang).then(() => {
        localStorage.setItem('react-app-lang', lang);
      });
    }
  };

  return (
    <Box display="flex" alignItems="center">
      <ButtonUnstyled
        className={`btn ${i18n.language === 'en' ? 'btn-active' : 'btn-inactive'}`}
        onClick={() => handleChange('en')}
      >
        Eng
      </ButtonUnstyled>
      <ButtonUnstyled
        className={`btn ${i18n.language === 'vi' ? 'btn-active' : 'btn-inactive'}`}
        onClick={() => handleChange('vi')}
      >
        Vie
      </ButtonUnstyled>
    </Box>
  );
}

export default LanguageSwitcher;