Replace part of the Demo of the notification with the hooks (#35710)

* docs: modify the part demo to hooks

* docs: modify the part demo to hooks

components/notification/demo/custom-icon.md

@@ -18,20 +18,27 @@ import { SmileOutlined } from '@ant-design/icons';
 import { Button, notification } from 'antd';
 import React from 'react';
 
-const openNotification = () => {
+const App: React.FC = () => {
-  notification.open({
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = () => {
+    api.open({
       message: 'Notification Title',
       description:
         'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
       icon: <SmileOutlined style={{ color: '#108ee9' }} />,
     });
-};
+  };
 
-const App: React.FC = () => (
+  return (
+    <>
+      {contextHolder}
       <Button type="primary" onClick={openNotification}>
         Open the notification box
       </Button>
-);
+    </>
+  );
+};
 
 export default App;
 ```

components/notification/demo/custom-style.md

@@ -17,8 +17,11 @@ The style and className are available to customize Notification.
 import { Button, notification } from 'antd';
 import React from 'react';
 
-const openNotification = () => {
+const App: React.FC = () => {
-  notification.open({
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = () => {
+    api.open({
       message: 'Notification Title',
       description:
         'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
@@ -27,13 +30,16 @@ const openNotification = () => {
         width: 600,
       },
     });
-};
+  };
 
-const App: React.FC = () => (
+  return (
+    <>
+      {contextHolder}
       <Button type="primary" onClick={openNotification}>
         Open the notification box
       </Button>
-);
+    </>
-
+  );
+};
 export default App;
 ```

components/notification/demo/duration.md

@@ -17,21 +17,27 @@ title:
 import { Button, notification } from 'antd';
 import React from 'react';
 
-const openNotification = () => {
+const App: React.FC = () => {
-  const args = {
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = () => {
+    api.open({
       message: 'Notification Title',
       description:
         'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
       duration: 0,
+    });
   };
-  notification.open(args);
-};
 
-const App: React.FC = () => (
+  return (
+    <>
+      {contextHolder}
       <Button type="primary" onClick={openNotification}>
         Open the notification box
       </Button>
-);
+    </>
+  );
+};
 
 export default App;
 ```

components/notification/demo/placement.md

@@ -26,17 +26,21 @@ import { Button, Divider, notification, Space } from 'antd';
 import type { NotificationPlacement } from 'antd/lib/notification';
 import React from 'react';
 
-const openNotification = (placement: NotificationPlacement) => {
+const App: React.FC = () => {
-  notification.info({
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = (placement: NotificationPlacement) => {
+    api.info({
       message: `Notification ${placement}`,
       description:
         'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
       placement,
     });
-};
+  };
 
-const App: React.FC = () => (
+  return (
     <>
+      {contextHolder}
       <Space>
         <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
           top
@@ -84,7 +88,8 @@ const App: React.FC = () => (
         </Button>
       </Space>
     </>
-);
+  );
+};
 
 export default App;
 ```

components/notification/demo/update.md

@@ -19,27 +19,33 @@ import React from 'react';
 
 const key = 'updatable';
 
-const openNotification = () => {
+const App: React.FC = () => {
-  notification.open({
+  const [api, contextHolder] = notification.useNotification();
+  const openNotification = () => {
+    api.open({
       key,
       message: 'Notification Title',
       description: 'description.',
     });
 
     setTimeout(() => {
-    notification.open({
+      api.open({
         key,
         message: 'New Title',
         description: 'New description.',
       });
     }, 1000);
-};
+  };
 
-const App: React.FC = () => (
+  return (
+    <>
+      {contextHolder}
       <Button type="primary" onClick={openNotification}>
         Open the notification box
       </Button>
-);
+    </>
+  );
+};
 
 export default App;
 ```

components/notification/demo/with-btn.md

@@ -23,7 +23,10 @@ const close = () => {
   );
 };
 
-const openNotification = () => {
+const App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = () => {
     const key = `open${Date.now()}`;
     const btn = (
       <Space>
@@ -35,7 +38,7 @@ const openNotification = () => {
         </Button>
       </Space>
     );
-  notification.open({
+    api.open({
       message: 'Notification Title',
       description:
         'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
@@ -43,13 +46,17 @@ const openNotification = () => {
       key,
       onClose: close,
     });
-};
+  };
 
-const App: React.FC = () => (
+  return (
+    <>
+      {contextHolder}
       <Button type="primary" onClick={openNotification}>
         Open the notification box
       </Button>
-);
+    </>
+  );
+};
 
 export default App;
 ```

components/notification/demo/with-icon.md

@@ -19,22 +19,29 @@ import React from 'react';
 
 type NotificationType = 'success' | 'info' | 'warning' | 'error';
 
-const openNotificationWithIcon = (type: NotificationType) => {
+const App: React.FC = () => {
-  notification[type]({
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotificationWithIcon = (type: NotificationType) => {
+    api[type]({
       message: 'Notification Title',
       description:
         'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
     });
-};
+  };
 
-const App: React.FC = () => (
+  return (
+    <>
+      {contextHolder}
       <Space>
         <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
         <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
         <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
         <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
       </Space>
-);
+    </>
+  );
+};
 
 export default App;
 ```