B
B
Berry React
v3.3.0
Search…
⌃K

Internationalization

Localization support IE11, Edge, Chrome, Firefox & Safari.
Berry supports four languages ('en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese) and can be easily switched from the header bar. The main menu is also internationalized for all four languages. If you wish to add an additional language or set a default language, please continue reading below...

How does it work?

Data for locale files exist at src\utils\locales
.json file
{
"dashboard": "Dashboard",
"default": "Default",
"analytics": "Analytics",
...
...
}
To change Locale, open file src\config.js file and set language
JavaScript
TypeScript
config.js
const config = {
...
i18n: 'en', // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
...
}
import { PaletteMode } from '@material-ui/core';
const config: {
...
i18n: string;
...
};
} = {
...
// 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
i18n: 'en',
...
};
export default config;
Open file App.js and apply IntlProvider
JavaScript
TypeScript
App.js
import React from 'react';
import { useSelector } from 'react-redux';
import { ThemeProvider } from '@material-ui/core/styles';
import { CssBaseline, StyledEngineProvider } from '@material-ui/core';
// routing
import Routes from 'routes';
// defaultTheme
import themes from 'themes';
// project imports
import Locales from 'ui-component/Locales';
...
...
// ===========================|| APP ||=========================== //
const App = () => {
const customization = useSelector((state) => state.customization);
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={themes(customization)}>
<CssBaseline />
...
<Locales>
...
</Locales>
...
</ThemeProvider>
</StyledEngineProvider>
);
};
export default App;
import { useSelector } from 'react-redux';
import { ThemeProvider } from '@material-ui/core/styles';
import { CssBaseline, StyledEngineProvider } from '@material-ui/core';
// routing
import Routes from 'routes';
// store
import { DefaultRootStateProps } from 'types';
// defaultTheme
import themes from 'themes';
// project imports
import Locales from 'ui-component/Locales';
...
...
// ==============================|| APP ||============================== //
const App = () => {
const customization = useSelector((state: DefaultRootStateProps) => state.customization);
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={themes(customization)}>
<CssBaseline />
...
<Locales>
...
</Locales>
...
</ThemeProvider>
</StyledEngineProvider>
);
};
export default App;