You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Use the `options` props to pass additional options to the `translate` function, e.g. for [pluralization or interpolation](./TranslationTranslating.md#interpolation-pluralization-and-default-translation).
76
73
77
-
{% raw %}
78
-
79
74
```tsx
80
75
const messages = {
81
76
custom: {
@@ -87,12 +82,8 @@ const messages = {
87
82
// Hello, John!
88
83
```
89
84
90
-
{% endraw %}
91
-
92
85
One particular option is `smart_count`, which is used for pluralization.
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/i18n/TranslationSetup.md
+12-14Lines changed: 12 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,22 @@
1
1
---
2
-
layout: default
3
-
title: "Setup"
2
+
title: "Setting Up Translations"
4
3
---
5
4
6
-
# Setting Up Translations
7
-
8
5
If you want to add or update translations, you'll have to provide your own `i18nProvider`.
9
6
10
-
Just like for the `dataProvider` and the `authProvider`, you can inject the `i18nProvider` to your react-admin app using the `<Admin i18nProvider>` prop:
7
+
Just like for the `dataProvider` and the `authProvider`, you can inject the `i18nProvider` to your react-admin app using the `<CoreAdminContext i18nProvider>` prop:
The second argument to the `polyglotI18nProvider` function is the default locale. The third is the list of supported locales - and is used by the [`<LocaleMenuButton>`](./LocalesMenuButton.md) component to display a list of languages.
65
+
The second argument to the `polyglotI18nProvider` function is the default locale. The third is the list of supported locales - and is used by the [`<LocaleMenuButton>`](https://marmelab.com/react-admin/LocalesMenuButton.html) component to display a list of languages.
68
66
69
-
Next, pass the custom `i18nProvider` to your `<Admin>`:
67
+
Next, pass the custom `i18nProvider` to your `<CoreAdminContext>`:
70
68
71
69
```jsx
72
-
import { Admin } from'react-admin';
70
+
import { CoreAdminContext } from'ra-core';
73
71
import { i18nProvider } from'./i18nProvider';
74
72
75
73
constApp= () => (
76
-
<Admin
74
+
<CoreAdminContext
77
75
i18nProvider={i18nProvider}
78
76
dataProvider={dataProvider}
79
77
>
80
78
...
81
-
</Admin>
79
+
</CoreAdminContext>
82
80
);
83
81
```
84
82
85
-
That's all it takes to have a multilingual UI. As an added benefit, once a user has chosen a locale different from the default one, the react-admin app will always render using that locale (thanks to [the Store](./Store.md)).
83
+
That's all it takes to have a multilingual UI. As an added benefit, once a user has chosen a locale different from the default one, the react-admin app will always render using that locale (thanks to [the Store](../guides/Store.md)).
86
84
87
85
## Using The Browser Locale
88
86
89
87
React-admin provides a helper function named `resolveBrowserLocale()`, which detects the user's browser locale. To use it, simply pass the function as the `initialLocale` argument of `polyglotI18nProvider`.
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/i18n/TranslationTranslating.md
+12-49Lines changed: 12 additions & 49 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,7 @@
1
1
---
2
-
layout: default
3
-
title: "Translating"
2
+
title: "Translating UI Components"
4
3
---
5
4
6
-
# Translating UI Components
7
-
8
5
The messages returned by the `polyglotI18nProvider` function argument should be a dictionary where the keys identify interface components, and values are the translated string. This dictionary is a simple JavaScript object looking like the following:
9
6
10
7
```js
@@ -29,7 +26,7 @@ All react-admin core components use keys starting with the `ra` prefix, to preve
29
26
The default (English) messages are available in [the `ra-language-english` package source](https://github.com/marmelab/react-admin/blob/master/packages/ra-language-english/src/index.ts).
30
27
31
28
32
-
**Tip**: You can see the raw translation keys in the UI by passing a dummy `i18nProvider` to the `<Admin>` component:
29
+
**Tip**: You can see the raw translation keys in the UI by passing a dummy `i18nProvider` to the `<CoreAdminContext>` component:
33
30
34
31
```jsx
35
32
consti18nProvider= {
@@ -39,12 +36,12 @@ const i18nProvider = {
39
36
}
40
37
41
38
constApp= () => (
42
-
<Admin
39
+
<CoreAdminContext
43
40
dataProvider={dataProvider}
44
41
i18nProvider={i18nProvider}
45
42
>
46
43
{/* ... */}
47
-
</Admin>
44
+
</CoreAdminContext>
48
45
);
49
46
```
50
47
@@ -102,7 +99,7 @@ Imagine a translation key for the text to translate, e.g. 'myroot.hello.world' f
102
99
```jsx
103
100
// in src/MyHelloButton.js
104
101
import*asReactfrom"react";
105
-
import { useTranslate } from'react-admin';
102
+
import { useTranslate } from'ra-core';
106
103
107
104
exportconstMyHelloButton= () => {
108
105
consttranslate=useTranslate();
@@ -147,7 +144,7 @@ export const en = {
147
144
148
145
## Translating Form Validation Errors
149
146
150
-
In Create and Edit views, forms can use [custom validators](./Validation.md#per-input-validation-custom-function-validator). These validator functions should return translation keys rather than translated messages. React-admin automatically passes these identifiers to the translation function.
147
+
In Create and Edit views, forms can use [custom validators](../create-edit/Validation.md#per-input-validation-custom-function-validator). These validator functions should return translation keys rather than translated messages. React-admin automatically passes these identifiers to the translation function.
151
148
152
149
For instance, here is a validator function that only allows numbers greater than 10:
If you use [the `useNotify` hook](./useNotify.md) to display a notification to the user, you can use a translation key for the notification text. React-admin will translate it automatically - no need to call `translate`.
199
+
If you use [the `useNotify` hook](../common/useNotify.md) to display a notification to the user, you can use a translation key for the notification text. React-admin will translate it automatically - no need to call `translate`.
## Interpolation, Pluralization and Default Translation
220
217
221
-
If you're using [`ra-i18n-polyglot`](./Translation.md#ra-i18n-polyglot) (the default `i18nProvider`), you can leverage the advanced features of its `translate` function. [Polyglot.js](https://airbnb.io/polyglot.js/), the library behind `ra-i18n-polyglot`, provides some nice features such as interpolation and pluralization, that you can use in react-admin.
218
+
If you're using [`ra-i18n-polyglot`](../guides/Translation.md#ra-i18n-polyglot) (the default `i18nProvider`), you can leverage the advanced features of its `translate` function. [Polyglot.js](https://airbnb.io/polyglot.js/), the library behind `ra-i18n-polyglot`, provides some nice features such as interpolation and pluralization, that you can use in react-admin.
Check out the [Polyglot.js documentation](https://airbnb.io/polyglot.js/) for more information.
246
243
247
-
## Translating Record Content
248
-
249
-
Some of your records may contain data with multiple versions - one for each locale.
250
-
251
-
For instance, a product may have one reference, but several names. A `product` record would look like this:
252
-
253
-
```jsx
254
-
{
255
-
id:123,
256
-
reference:'GURSIKSO',
257
-
name: {
258
-
en:'Evening dress',
259
-
fr:'Robe du soir',
260
-
}
261
-
}
262
-
```
263
-
264
-
React-admin provides a specialized component to display such translatable data ([`<TranslatableFields>`](./TranslatableFields.md)), and another specialized component to edit it ([`<TranslatableInputs>`](./TranslatableInputs.md)):
0 commit comments