Buy nowGet update

Multi language

Enable and manage multilingual support for your project.

Setup / remove

Search for the keyword src/locales to find and configure relevant components and files.

multi-language

Add new content

Add translations in language-specific JSON files inside src/locales.

src/locales/en.json
{
"heading": "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
"nested": {
"nested1": "nested En"
}
}

src/locales/fr.json
{
"heading": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression",
"nested": {
"nested1": "nested Fr"
}
}
Usage example

Example usage of custom localization hooks.

import { useLocales, useTranslate } from 'src/locales';
 
function MultiLanguage() {
const { t, onChangeLang } = useTranslate();
const { allLang, currentLang } = useLocales();
 
return (
<>
  <RadioGroup
    row
    value={currentLang.value}
    onChange={(event) => onChangeLang(event.target.value)}
  >
    {allLang.map((lang) => (
      <FormControlLabel
        key={lang.label}
        value={lang.value}
        label={lang.label}
        control={<Radio />}
      />
    ))}
  </RadioGroup>
 
  <Typography variant="h2">{t('heading')}</Typography>
  <Typography variant="body2">{t('nested.nested1')}</Typography>
</>
);
}
Enable RTL when selecting Arabic language

Example usage of custom localization hooks.

src/layouts/components/language-popover.tsx
import { useSettingsContext } from 'src/components/settings';
 
const settings = useSettingsContext();
 
const handleChangeLang = useCallback(
  (newLang: LanguageValue) => {
    onChangeLang(newLang);
    onClose();
    settings.setField('direction', newLang === 'ar' ? 'rtl' : 'ltr');
  },
  [onChangeLang, onClose, settings]
);

src/theme/theme-provider.tsx
import { useEffect } from 'react';
import { useTranslate } from 'src/locales';
 
const { currentLang } = useTranslate();
const settings = useSettingsContext();
 
useEffect(() => {
  if (currentLang.value === 'ar') {
    settings.setField('direction', 'rtl');
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentLang.value]);
🔗 Reference