Multi Language

Localization support IE11, Edge, Chrome, Firefox & Safari.

SassAble supports four languages ('en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese) and can be easily switched from the header profile tab. The main menu is also internationalised for all four languages. If you wish to add a or set a default language, please continue reading below...

How does it work?

Data for locale files exists at src\utils\locales

.json file

{
  "manage": "Manage",
  "dashboard": "Dashboard",
  "home": "Home",
   ...
   ...
}

To change the Locale, open the file src\config file and set language

VITE(TS)

src\config.ts

...

// @types
import { ConfigProps } from '@/types/config';

...

export enum ThemeI18n {
  EN = 'en',
  FR = 'fr',
  RO = 'ro',
  ZH = 'zh'
}

/***************************  CONFIG  ***************************/

const config: ConfigProps = {
  ...
  i18n: ThemeI18n.EN
};

...

VITE(JS)

src\config.js

...

export enum ThemeI18n {
  EN = 'en',
  FR = 'fr',
  RO = 'ro',
  ZH = 'zh'
}

/***************************  CONFIG  ***************************/

const config = {
  ...
  i18n: ThemeI18n.EN
};

...

NEXT(TS)

src\config.ts

...

// @types
import { ConfigProps } from '@/types/config';

...

export enum ThemeI18n {
  EN = 'en',
  FR = 'fr',
  RO = 'ro',
  ZH = 'zh'
}

/***************************  CONFIG  ***************************/

const config: ConfigProps = {
  ...
  i18n: ThemeI18n.EN
};

...

NEXT(JS)

src\config.js

...

export enum ThemeI18n {
  EN = 'en',
  FR = 'fr',
  RO = 'ro',
  ZH = 'zh'
}

/***************************  CONFIG  ***************************/

const config = {
  ...
  i18n: ThemeI18n.EN
};

...

Open file src/app/ProviderWrapper

VITE(TS)

src/App.tsx

import { RouterProvider } from 'react-router-dom';

// @project
import Locales from '@/components/Locales';
import RTLLayout from '@/components/RTLLayout';
import Snackbar from '@/components/Snackbar';
import Notistack from '@/components/third-party/Notistack';
import { ConfigProvider } from '@/contexts/ConfigContext';

import Metrics from '@/metrics';
import router from '@/routes';
import ThemeCustomization from '@/themes';

function App() {
  return (
    <>
      <ConfigProvider>
        <ThemeCustomization>
          <RTLLayout>
            <Locales>
              <Notistack>
                <RouterProvider router={router} />
                <Snackbar />
              </Notistack>
            </Locales>
          </RTLLayout>
        </ThemeCustomization>
      </ConfigProvider>
      <Metrics />
    </>
  );
}

export default App;

VITE(JS)

src/App.jsx

import { RouterProvider } from 'react-router-dom';

// @project
import Locales from '@/components/Locales';
import RTLLayout from '@/components/RTLLayout';
import Snackbar from '@/components/Snackbar';
import Notistack from '@/components/third-party/Notistack';
import { ConfigProvider } from '@/contexts/ConfigContext';

import Metrics from '@/metrics';
import router from '@/routes';
import ThemeCustomization from '@/themes';

function App() {
  return (
    <>
      <ConfigProvider>
        <ThemeCustomization>
          <RTLLayout>
            <Locales>
              <Notistack>
                <RouterProvider router={router} />
                <Snackbar />
              </Notistack>
            </Locales>
          </RTLLayout>
        </ThemeCustomization>
      </ConfigProvider>
      <Metrics />
    </>
  );
}

export default App;

NEXT(TS)

src/app/ProviderWrapper.tsx

'use client';

// @project
import Locales from '@/components/Locales';
import RTLLayout from '@/components/RTLLayout';
import Snackbar from '@/components/Snackbar';
import Notistack from '@/components/third-party/Notistack';
import { ConfigProvider } from '@/contexts/ConfigContext';
import ThemeCustomization from '@/themes';

// @types
import { ChildrenProps } from '@/types/root';

/***************************  LAYOUT - CONFIG, THEME  ***************************/

export default function ProviderWrapper({ children }: ChildrenProps) {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          <Notistack>
            <Snackbar />
            <Locales>{children}</Locales>
          </Notistack>
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

NEXT(JS)

src/app/ProviderWrapper.jsx

'use client';

import PropTypes from 'prop-types';

// @project
import Locales from '@/components/Locales';
...

/***************************  LAYOUT - CONFIG, THEME  ***************************/

export default function ProviderWrapper({ children }) {
  return (
    ...
      <Locales>{children}</Locales>
    ...
  );
}

ProviderWrapper.propTypes = { children: PropTypes.any };

How to Use i18n in Any Custom Component?

This is the simplest and most common way to use translations in your components.

import { FormattedMessage } from 'react-intl';

const MyComponent = () => {
  return (
    <div>
      <h2><FormattedMessage id="dashboard" /></h2>
      <p><FormattedMessage id="demo" /></p>
    </div>
  );
};

Update json file according FormattedMessage ID value.

en.json

{
  
  "dashboard": "Dashboard",
  "demo": "Demo",
   ...
   ...
}

zh.json

{
   "dashboard": "仪表板",
   "demo": "演示",
   ...
   ...
}

fr.json

{
   "dashboard": "Tableau de bord",
   "demo": "Démo",
   ...
   ...
}

ro.json

{
   "dashboard": "Bord",
   "demo": "Demonstrație",
   ...
   ...
}