<LocalesMenuButton>

The <LocalesMenuButton> component, also known as the “language switcher”, displays a menu allowing users to select the language of the interface. It leverages the store so that their selection is persisted.

Usage

Add the <LocalesMenuButton> to a custom <AppBar>:

import { LocalesMenuButton, AppBar } from 'react-admin';
import { Typography } from '@mui/material';

export const MyAppBar = (props) => (
    <AppBar {...props}>
        <Typography flex="1" variant="h6" id="react-admin-title"></Typography>
        <LocalesMenuButton />
    </AppBar>
);

Then, pass the custom App Bar in a custom <Layout>, and the <Layout> to your <Admin>:

import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';
import { Admin, Resource, Layout } from 'react-admin';

import { MyAppBar } from './MyAppBar';

const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;

const i18nProvider = polyglotI18nProvider(
    locale => (locale === 'fr' ? frenchMessages : englishMessages),
    getLocales: () => [{ locale: 'en', name: 'English' }, { locale: 'fr', name: 'Français' }],
    'en' // Default locale
);

const App = () => (
    <Admin
        i18nProvider={i18nProvider}
        dataProvider={dataProvider}
        layout={MyLayout}
    >
        ...
    </Admin>
);

Tip: the <LocalesMenuButton> will be added to the <AppBar> automatically if you have multiple locales declared in the getLocales method of your i18nProvider.

languages

An array of objects ({ locale, name }) representing the key and the label of the languages available to end users. You can omit this prop if your i18nProvider has a getLocales function.

<LocalesMenuButton languages={[
    { locale: 'en', name: 'English' },
    { locale: 'fr', name: 'Français' },
]} />

The locale will be passed to setLocale when the user selects the language, and must be supported by the i18nProvider.

sx: CSS API

The <LocalesMenuButton> component accepts the usual className prop. You can also override many styles of the inner components thanks to the sx property (as most MUI components, see their documentation about it). This property accepts the following subclasses:

To override the style of all instances of <LocalesMenuButton> using the MUI style overrides, use the RaLocalesMenuButton key.

API

• LocalesMenuButton