React.js i18n: Localization Setup and Usage Guide

import { useTranslation } from 'react-i18next';
///...

const Component: React.FC = () => {
  const { t } = useTranslation();

  ///...
  return (
    <TextField
      fullWidth
      type="email"
      label={t('Email address')}
      InputLabelProps={{
        shrink: true
      }}
      {...getFieldProps('email')}
      error={Boolean(touched.email && errors.email)}
      helperText={touched.email && errors.email}
    />
  )
}

    // in functional component
    <Trans i18nKey="View all images" values={{ total }} />

    // in locales/en/translation.json
    {
      //...
      "View all images": "View all {{total}} images",
      //...
    }

    // in locales/cn/translation.json
    {
      //...
      "View all images": "查看所有 {{total}} 張圖片",
      //...
    }

// importing file from ./config/18n/i18n.ts
import i18n from '~/utils/i18n';

const messages = {
  hello: i18n.t('world'),
};

localStorage.setItem('i18nextLng', 'cn');