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

config.js

const config = {
    ...
    i18n: 'en', // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
    ...
}

TypeScript

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

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;

TypeScript

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;

For Remix

Open file Root.tsx and apply IntlProvider

TypeScript

Root.tsx

// project imports
import ThemeCustomization from 'themes';
import Locales from 'ui-component/Locales';
...
...

// ==============================|| APP ||============================== //

export default function App() {
    return (
        ...
            <Index />
        ...
    );
}

export const Index = () => {
    return (
        <ThemeCustomization>
            ...
                <Locales>
                    ...
                </Locales>
            ...
        </ThemeCustomization>
      );
};