Berry React
v4.0.0
v4.0.0
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • Firebase
    • Auth0
    • AWS Cognito
    • Supabase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
    • Render Menu from the backend
    • Remove menu render via backend
  • Theme
    • Configuration
    • Presets
    • Style
      • Color
      • Typography
      • Overrides
      • Shadows
    • Layouts
    • Logo
  • How to
    • Remove eslint
    • Remove prettier
  • Components
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • Dependencies
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • Berry Eco System
Powered by GitBook
On this page

Was this helpful?

Multi Language

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

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.jsx and apply IntlProvider

App.jsx
import { RouterProvider } from 'react-router-dom';

// routing
import router from 'routes';

// project imports
import Locales from 'ui-component/Locales';
import NavigationScroll from 'layout/NavigationScroll';
import RTLLayout from 'ui-component/RTLLayout';
import Snackbar from 'ui-component/extended/Snackbar';
import Notistack from 'ui-component/third-party/Notistack';

import ThemeCustomization from 'themes';

// auth provider
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
// import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
// import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
// import { Auth0Provider as AuthProvider } from 'contexts/Auth0Context';

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

const App = () => {
    return (
        <ThemeCustomization>
            <RTLLayout>
                <Locales>
                    <NavigationScroll>
                        <AuthProvider>
                            <>
                                <Notistack>
                                    <RouterProvider router={router} />
                                    <Snackbar />
                                </Notistack>
                            </>
                        </AuthProvider>
                    </NavigationScroll>
                </Locales>
            </RTLLayout>
        </ThemeCustomization>
    );
};

export default App;
App.tsx
import { RouterProvider } from 'react-router-dom';

// routing
import router from 'routes';

// project imports
import Locales from 'ui-component/Locales';
import NavigationScroll from 'layout/NavigationScroll';
import RTLLayout from 'ui-component/RTLLayout';
import Snackbar from 'ui-component/extended/Snackbar';
import Notistack from 'ui-component/third-party/Notistack';

import ThemeCustomization from 'themes';

// auth provider
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
// import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
// import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
// import { Auth0Provider as AuthProvider } from 'contexts/Auth0Context';

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

const App = () => {
    return (
        <ThemeCustomization>
            <RTLLayout>
                <Locales>
                    <NavigationScroll>
                        <AuthProvider>
                            <>
                                <Notistack>
                                    <RouterProvider router={router} />
                                    <Snackbar />
                                </Notistack>
                            </>
                        </AuthProvider>
                    </NavigationScroll>
                </Locales>
            </RTLLayout>
        </ThemeCustomization>
    );
};

export default App;

Last updated 1 month ago

Was this helpful?