Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix LocalesMenuButton's custom AppBar example and polyglotI18nProvider documentation #8452

Merged
merged 8 commits into from
Dec 14, 2022
Merged

Fix LocalesMenuButton's custom AppBar example and polyglotI18nProvider documentation #8452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
59d6459
Fix LocalesMenuButton Documentation
smeng9 Nov 30, 2022
0e9359b
apply review
smeng9 Dec 1, 2022
391aa72
change some wording
smeng9 Dec 1, 2022
1b7d3e1
Update docs/LocalesMenuButton.md
smeng9 Dec 8, 2022
61446f0
Update docs/LocalesMenuButton.md
smeng9 Dec 8, 2022
4228a78
Fix custom appbar example to use from mui package
smeng9 Dec 14, 2022
703d05c
remove unnecessary export
smeng9 Dec 14, 2022
8704195
Update docs/LocalesMenuButton.md
smeng9 Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions docs/LocalesMenuButton.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,29 @@ The `<LocalesMenuButton>` component, also known as the "language switcher", disp

## Usage

Add the `<LocalesMenuButton>` to a custom `<AppBar>`:
**Tip**: For most users, this component will be automatically added to react-admin's `<AppBar>` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component.

For advanced users who wish to use the customized `<AppBar>` from MUI package or place `<LocalesMenuButton>` elsewhere e.g. on a custom configuration page, they can do the following:

```jsx
import { LocalesMenuButton, AppBar } from 'react-admin';
import { Typography } from '@mui/material';
// in src/MyAppBar.js
import { LocalesMenuButton } from 'react-admin';
import { AppBar, Toolbar, Typography } from '@mui/material';

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

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

```jsx
// in src/App.js
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';
Expand All @@ -39,8 +45,8 @@ 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
'en', // Default locale
[{ locale: 'en', name: 'English' }, { locale: 'fr', name: 'Français' }]
);

const App = () => (
Expand All @@ -54,8 +60,6 @@ const App = () => (
);
```

**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.
Expand Down
5 changes: 4 additions & 1 deletion docs/TranslationWriting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,17 @@ title: "Writing An I18nProvider"

# Writing An I18nProvider

An `i18nProvider` should be an object with three methods:
An `i18nProvider` should be an object with three required methods and one optional method:

```jsx
// in src/i18nProvider.js
export const i18nProvider = {
// required
translate: (key, options) => string,
changeLocale: locale => Promise<void>,
getLocale: () => string,
// optional
getLocales: () => [{ locale: string; name: string; }],
}
```

Expand Down