<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.

LocalesMenuButton

Usage

Add the <LocalesMenuButton> to a custom <AppBar>, and list the locales available to end users:

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
            languages={[
                { locale: 'en', name: 'English' },
                { locale: 'fr', name: 'Français' },
            ]}
        />
    </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),
    'en' // Default locale
);

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

languages

An array of objects ({ locale, name }) representing the key and the label of the languages available to end users.

<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:

Rule name Description
& .RaLocalesMenuButton-selectedLanguage Applied to the current language element

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

API