Merge pull request #8369 from marmelab/fix-doc-notification

[Doc] Add missing `Admin`'s notification prop

docs/Admin.md

@@ -46,6 +46,7 @@ Here are all the props accepted by the component:
 - [`ready`](#ready)
 - [`requireAuth`](#requireauth)
 - [`store`](#store)
+- [`notification`](#notification)
 
 ## `dataProvider`
 
@@ -399,20 +400,20 @@ const App = () => (
 );
 ```
 
-Your custom layout can simply extend [the default `<Layout>` component](./Layout.md) if you only want to override the appBar, the menu, the notification component, or the error page. For instance:
+Your custom layout can simply extend [the default `<Layout>` component](./Layout.md) if you only want to override the appBar, the menu, or the error page. For instance:
 
 ```jsx
 // in src/MyLayout.js
 import { Layout } from 'react-admin';
 import MyAppBar from './MyAppBar';
 import MyMenu from './MyMenu';
-import MyNotification from './MyNotification';
+import MyError from './MyError';
 
 const MyLayout = (props) => <Layout
     {...props}
     appBar={MyAppBar}
     menu={MyMenu}
-    notification={MyNotification}
+    error={MyError}
 />;
 
 export default MyLayout;
@@ -533,6 +534,33 @@ const App = () => (
 );
 ```
 
+## `notification`
+
+You can override the notification component, for instance to change the notification duration. A common use case is to change the `autoHideDuration`, and force the notification to remain on screen longer than the default 4 seconds. For instance, to create a custom Notification component with a 5 seconds default:
+
+```jsx
+// in src/MyNotification.js
+import { Notification } from 'react-admin';
+
+const MyNotification = () => <Notification autoHideDuration={5000} />;
+
+export default MyNotification;
+```
+
+To use this custom notification component, pass it to the `<Admin>` component as the `notification` prop:
+
+```jsx
+// in src/App.js
+import MyNotification from './MyNotification';
+import dataProvider from './dataProvider';
+
+const App = () => (
+    <Admin notification={MyNotification} dataProvider={dataProvider}>
+        // ...
+    </Admin>
+);
+```
+
 ## Declaring resources at runtime
 
 You might want to dynamically define the resources when the app starts. To do so, you have two options: using a function as `<Admin>` child, or unplugging it to use a combination of `AdminContext` and `<AdminUI>` instead.

docs/Theming.md

@@ -1009,13 +1009,13 @@ const App = () => (
 
 ## Notifications
 
-You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default:
+You can override the notification component, for instance to change the notification duration. A common use case is to change the `autoHideDuration`, and force the notification to remain on screen longer than the default 4 seconds. For instance, to create a custom Notification component with a 5 seconds default:
 
 ```jsx
 // in src/MyNotification.js
 import { Notification } from 'react-admin';
 
-const MyNotification = props => <Notification {...props} autoHideDuration={5000} />;
+const MyNotification = () => <Notification autoHideDuration={5000} />;
 
 export default MyNotification;
 ```