React MUI Localization

Last Updated : 19 Oct, 2022

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Localization Utility in the Material-UI library.

The Localization Utility provided by MUI is used to adopt a particular product or content to a specific locale or market. The default locale of MUI is set to English (US).

Supported Locales:

Locale	Import Name
Amharic	amET
Arabic (Egypt)	arEG
Arabic (Saudi Arabia)	arSA
Arabic (Sudan)	arSD
Armenian	hyAM
Azerbaijani	azAZ
Bangla	bnBD
Bulgarian	bgBG
Catalan	caES
Chinese (Hong Kong)	zhHK
Chinese (Simplified)	zhCN
Chinese (Taiwan)	zhTW
Croatian	hrHR
Czech	csCZ
Danish	daDK
Dutch	nlNL
English (United States)	enUS
Estonian	etEE
Finnish	fiFI
French	frFR
German	deDE
Greek	elGR
Hebrew	heIL
Hindi	hiIN
Hungarian	huHU
Icelandic	isIS
Indonesian	idID
Italian	itIT
Japanese	jaJP
Khmer	khKH
Kazakh	kzKZ
Korean	koKR
Macedonian	mkMK
Norwegian (bokmål)	nbND
Persian	faIR
Polish	plPL
Portuguese	ptPT
Portuguese (Brazil)	ptBR
Romanian	roRO
Russian	ruRU
Serbian	srRS
Sinhalese	siLK
Slovak	skSK
Spanish	esES
Swedish	svSE
Thai	thTH
Turkish	trTR
Ukrainian	ukUA
Vietnamese	viVN

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material

Project Structure: It will look like the following.

Example 1: In this example, we will try to create a simple application that uses Localization Utility, by MUI. We will build a dropdown that allows users to choose a specific locale, and display the table pagination in that selected locale.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

Filename: App.js

Javascript

import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import * as locales from '@mui/material/locale';
 
export default function App() {
    const [locale, setLocale] = React.useState('zhCN');
    const theme = useTheme();
    const themeWithLocale = React.useMemo(
        () => createTheme(theme, locales[locale]),
        [locale, theme],
    );
    return (
        <ThemeProvider theme={themeWithLocale}>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Localization until</strong>
                <br />
                <br />
            </div>
            <Autocomplete
                options={Object.keys(locales)}
                getOptionLabel={(key) => 
                    `${key.substring(0, 2)}-${key.substring(2, 4)}`}
                style={{ width: 300 }}
                value={locale}
                disableClearable
                onChange={(event, newValue) => {
                    setLocale(newValue);
                }}
                renderInput={(params) => (
                    <TextField {...params} 
                    label="Locale" fullWidth />
                )}
            />
            <TablePagination
                count={2000}
                rowsPerPage={10}
                page={1}
                component="div"
                onPageChange={() => { }}
            />
        </ThemeProvider>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will try to create a simple application that uses Localization Utility, by MUI. We will build a Switch that allows users to switch between English (US) and Chinese (Simplified) locales.

Filename: App.js

Javascript

import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { zhCN, enUS } from '@mui/material/locale';
import { Switch } from '@mui/material';
 
export default function App() {
    const [locale, setLocale] = React.useState(enUS);
    const [checked, setChecked] = React.useState(false);
    const theme = useTheme();
    const themeWithLocale = React.useMemo(
        () => createTheme(theme, locale),
        [theme, locale],
    );
    React.useEffect(() => {
        if (checked) {
            setLocale(zhCN)
        } else {
            setLocale(enUS)
        }
    }, [checked])
    return (
        <ThemeProvider theme={themeWithLocale}>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Localization until</strong>
                <br />
                <br />
            </div>
            <div style={{ display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center' }}>
                <Switch checked={checked} onChange={() => {
                    setChecked(checked => !checked);
                }} />
                <p>{locale === enUS ? 'English (US)' : 
                    'Chinese (Simplified)'}</p>
            </div>
            <TablePagination
                count={2000}
                rowsPerPage={10}
                page={1}
                component="div"
                onPageChange={() => { }}
            />
        </ThemeProvider>
    );
}