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", }} > neveropen </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", }} > neveropen </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> );} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Reference: https://mui.com/material-ui/guides/localization/#main-content
