Flexy Admin Template by WrapPixel.com

Multi Language

1. Add content

                        
// ----------------------------------------------------
// File: src/utils/languages/ar.json  
// ----------------------------------------------------  

{
  "Modern": "عصري",
  "Contacts":"جهات الاتصال",
  "Chats":"الدردشات"
}



// ----------------------------------------------------
// File: src/utils/languages/en.json  
// ----------------------------------------------------  

{
  "Modern": "Modern",
  "Contacts":"Contacts",
  "Chats":"Chats"
}



// ----------------------------------------------------
// File: src/utils/languages/ch.json  
// ----------------------------------------------------  

{
  "Modern": "現代的",
  "Contacts":"聯繫人",
  "Chats":"聊天記錄"
}



// ----------------------------------------------------
// File: src/utils/languages/fr.json  
// ---------------------------------------------------- 

{
  "Modern": "Moderne",
  "Contacts":"Les contacts",
  "Chats":"Chattes"
}

2. Usage

  
// ----------------------------------------------------
// File: src/layouts/full/vertical/header/language.tsx  
// ---------------------------------------------------- 

import React from 'react';
import { Avatar, IconButton, Menu, MenuItem, Typography } from '@mui/material';
import { useSelector, useDispatch } from 'src/store/Store';
import { setLanguage } from 'src/store/customizer/CustomizerSlice';
import FlagEn from 'src/assets/images/flag/icon-flag-en.svg';
import FlagFr from 'src/assets/images/flag/icon-flag-fr.svg';
import FlagCn from 'src/assets/images/flag/icon-flag-cn.svg';
import FlagSa from 'src/assets/images/flag/icon-flag-sa.svg';
import { Stack } from '@mui/system';
import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';
import { AppState } from 'src/store/Store';

const Languages = [
    {
      flagname: 'English (UK)',
      icon: FlagEn,
      value: 'en',
    },
    {
      flagname: '中国人 (Chinese)',
      icon: FlagCn,
      value: 'ch',
    },
    {
      flagname: 'français (French)',
      icon: FlagFr,
      value: 'fr',
    },
    
    {
      flagname: 'عربي (Arabic)',
      icon: FlagSa,
      value: 'ar',
    },
];
    
const Language = () => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const dispatch = useDispatch();
    const open = Boolean(anchorEl);
    const customizer = useSelector((state: AppState) => state.customizer);
    const currentLang =
    Languages.find((_lang) => _lang.value === customizer.isLanguage) || Languages[1];
    const { i18n } = useTranslation();
    const handleClick = (event: any) => {
    setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
    setAnchorEl(null);
    };
    useEffect(() => {
    i18n.changeLanguage(customizer.isLanguage);
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
    
return (
<>
<IconButton
    aria-label="more"
    id="long-button"
    aria-controls={open ? 'long-menu' : undefined}
    aria-expanded={open ? 'true' : undefined}
    aria-haspopup="true"
    onClick={handleClick}
    >
    <Avatar src={currentLang.icon} alt={currentLang.value} sx={{ width: 20, height: 20 }} />
    </IconButton>
    <Menu
    id="long-menu"
    anchorEl={anchorEl}
    open={open}
    onClose={handleClose}
    sx={{
      '& .MuiMenu-paper': {
        width: '200px',
      },
    }}
    >
      {Languages.map((option, index) => (
        <MenuItem
        key={index}
        sx={{ py: 2, px: 3 }}
        onClick={() => dispatch(setLanguage(option.value))}
        >
          <Stack direction="row" spacing={1} alignItems="center">
          <Avatar src={option.icon} alt={option.icon} sx={{ width: 20, height: 20 }} /<
            <Typography> {option.flagname}</Typography>
            </Stack>
        ))}
        </Menu>
        </>
    );
};
    
export default Language;

Checkout Pro Version

Multi Language

1. Add content

2. Usage