Internationalization
Localization support IE11, Edge, Chrome, Firefox & Safari.
Berry supports four types of international languages ('en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese). You can switch language from the header bar. We internationalize the main menu for all four languages, When you change it from the header, you will see the effect there. If you want to configure one more language or set a default language then continue reading below...

How does it work?

Data for locale files exist at src\utils\locales
.json file
1
{
2
"dashboard": "Dashboard",
3
"default": "Default",
4
"analytics": "Analytics",
5
...
6
...
7
}
Copied!
To change Locale, open file src\config.js file and set language
JavaScript
Typescript
config.js
1
const config = {
2
...
3
i18n: 'en', // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
4
...
5
}
Copied!
1
import { PaletteMode } from '@material-ui/core';
2
3
const config: {
4
...
5
i18n: string;
6
...
7
};
8
} = {
9
...
10
// 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
11
i18n: 'en',
12
...
13
};
14
15
export default config;
Copied!
Open file App.js and apply IntlProvider
JavaScript
Typescript
App.js
1
import React from 'react';
2
import { useSelector } from 'react-redux';
3
4
import { ThemeProvider } from '@material-ui/core/styles';
5
import { CssBaseline, StyledEngineProvider } from '@material-ui/core';
6
7
// routing
8
import Routes from 'routes';
9
10
// defaultTheme
11
import themes from 'themes';
12
13
// project imports
14
import Locales from 'ui-component/Locales';
15
...
16
...
17
18
// ===========================|| APP ||=========================== //
19
20
const App = () => {
21
const customization = useSelector((state) => state.customization);
22
23
return (
24
<StyledEngineProvider injectFirst>
25
<ThemeProvider theme={themes(customization)}>
26
<CssBaseline />
27
...
28
<Locales>
29
...
30
</Locales>
31
...
32
</ThemeProvider>
33
</StyledEngineProvider>
34
);
35
};
36
37
export default App;
Copied!
1
import { useSelector } from 'react-redux';
2
3
import { ThemeProvider } from '@material-ui/core/styles';
4
import { CssBaseline, StyledEngineProvider } from '@material-ui/core';
5
6
// routing
7
import Routes from 'routes';
8
9
// store
10
import { DefaultRootStateProps } from 'types';
11
12
// defaultTheme
13
import themes from 'themes';
14
15
// project imports
16
import Locales from 'ui-component/Locales';
17
...
18
...
19
20
// ==============================|| APP ||============================== //
21
22
const App = () => {
23
const customization = useSelector((state: DefaultRootStateProps) => state.customization);
24
25
return (
26
<StyledEngineProvider injectFirst>
27
<ThemeProvider theme={themes(customization)}>
28
<CssBaseline />
29
...
30
<Locales>
31
...
32
</Locales>
33
...
34
</ThemeProvider>
35
</StyledEngineProvider>
36
);
37
};
38
39
export default App;
Copied!
Last modified 13d ago
Copy link