diff --git a/docs/Translation.md b/docs/Translation.md
index b01049b35df..d6231206df5 100644
--- a/docs/Translation.md
+++ b/docs/Translation.md
@@ -100,11 +100,9 @@ You can find translation packages for the following languages:
In addition, the previous version of react-admin, called admin-on-rest, was translated in the following languages:
-- Arabic ( `ع` ): [aymendhaya/aor-language-arabic](https://github.com/aymendhaya/aor-language-arabic)
- Chinese (Traditional) (`cht`): [leesei/aor-language-chinese-traditional](https://github.com/leesei/aor-language-chinese-traditional)
- Croatian (`hr`): [ariskemper/aor-language-croatian](https://github.com/ariskemper/aor-language-croatian)
- Greek (`el`): [zifnab87/aor-language-greek](https://github.com/zifnab87/aor-language-greek)
-- Hebrew (`he`): [motro/aor-language-hebrew](https://github.com/motro/aor-language-hebrew)
- Japanese (`ja`): [kuma-guy/aor-language-japanese](https://github.com/kuma-guy/aor-language-japanese)
- Slovenian (`sl`): [ariskemper/aor-language-slovenian](https://github.com/ariskemper/aor-language-slovenian)
- Swedish (`sv`): [StefanWallin/aor-language-swedish](https://github.com/StefanWallin/aor-language-swedish)
@@ -139,31 +137,28 @@ const App = () => (
export default App;
```
-Then, dispatch the `CHANGE_LOCALE` action, by using the `changeLocale` action creator. For instance, the following component switches language between English and French:
+Then, dispatch the `CHANGE_LOCALE` action, by using the `changeLocale` action creator. For instance, the following component allows the user to switch the interface language between English and French:
```jsx
import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
import Button from '@material-ui/core/Button';
-import { changeLocale as changeLocaleAction } from 'react-admin';
-
-class LocaleSwitcher extends Component {
- switchToFrench = () => this.props.changeLocale('fr');
- switchToEnglish = () => this.props.changeLocale('en');
-
- render() {
- const { changeLocale } = this.props;
- return (
-
+ );
}
-export default connect(undefined, { changeLocale: changeLocaleAction })(LocaleSwitcher);
+export default LocaleSwitcher;
```
## Using The Browser Locale
@@ -280,25 +275,28 @@ const App = () => (
);
```
-## Translating Your Own Components
+## `useTranslate` Hook
-React-admin package provides a `translate` Higher-Order Component, which simply passes the `translate` function as a prop to the wrapped component:
+If you need to translate messages in your own components, React-admin provides a `useTranslate` hook, which returns the `translate` function:
```jsx
// in src/MyHelloButton.js
import React from 'react';
-import { translate } from 'react-admin';
+import { useTranslate } from 'react-admin';
-const MyHelloButton = ({ translate }) => (
-
-);
+const MyHelloButton = () => {
+ const translate = useTranslate();
+ return (
+
+ );
+}
-export default translate(MyHelloButton);
+export default MyHelloButton;
```
**Tip**: For your message identifiers, choose a different root name than `ra` and `resources`, which are reserved.
-**Tip**: Don't use `translate` for Field and Input labels, or for page titles, as they are already translated:
+**Tip**: Don't use `useTranslate` for Field and Input labels, or for page titles, as they are already translated:
```jsx
// don't do this
@@ -312,6 +310,27 @@ export default translate(MyHelloButton);
// and translate the `resources.customers.fields.first_name` key
```
+## `withTranslate` HOC
+
+If you're stuck with class components, react-admin also exports a `withTranslate` higher-order component, which injects the `translate` function as prop.
+
+```jsx
+// in src/MyHelloButton.js
+import React, { Component } from 'react';
+import { withTranslate } from 'react-admin';
+
+class MyHelloButton extends Component {
+ render() {
+ const { translate } = this.props;
+ return (
+
+ );
+ }
+}
+
+export default withTranslate(MyHelloButton);
+```
+
## Using Specific Polyglot Features
Polyglot.js is a fantastic library: in addition to being small, fully maintained, and totally framework agnostic, it provides some nice features such as interpolation and pluralization, that you can use in react-admin.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index df26c6fb300..c13e79d32f3 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -789,7 +789,10 @@
Translations