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,8 +18,11 @@ import { SmileOutlined } from '@ant-design/icons';
 import { Button, notification } from 'antd';
 import React from 'react';
 
+const App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
   const openNotification = () => {
-  notification.open({
+    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,11 +30,15 @@ const openNotification = () => {
     });
   };
 
-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 App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
   const openNotification = () => {
-  notification.open({
+    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.',
@@ -29,11 +32,14 @@ const openNotification = () => {
     });
   };
 
-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 App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
   const openNotification = () => {
-  const args = {
+    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,8 +26,11 @@ import { Button, Divider, notification, Space } from 'antd';
 import type { NotificationPlacement } from 'antd/lib/notification';
 import React from 'react';
 
+const App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
   const openNotification = (placement: NotificationPlacement) => {
-  notification.info({
+    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.',
@@ -35,8 +38,9 @@ const openNotification = (placement: NotificationPlacement) => {
     });
   };
 
-const App: React.FC = () => (
+  return (
     <>
+      {contextHolder}
       <Space>
         <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
           top
@@ -85,6 +89,7 @@ const App: React.FC = () => (
       </Space>
     </>
   );
+};
 
 export default App;
 ```

components/notification/demo/update.md

@@ -19,15 +19,17 @@ import React from 'react';
 
 const key = 'updatable';
 
+const App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
   const openNotification = () => {
-  notification.open({
+    api.open({
       key,
       message: 'Notification Title',
       description: 'description.',
     });
 
     setTimeout(() => {
-    notification.open({
+      api.open({
         key,
         message: 'New Title',
         description: 'New description.',
@@ -35,11 +37,15 @@ const openNotification = () => {
     }, 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,6 +23,9 @@ const close = () => {
   );
 };
 
+const App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
   const openNotification = () => {
     const key = `open${Date.now()}`;
     const btn = (
@@ -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).',
@@ -45,11 +48,15 @@ const openNotification = () => {
     });
   };
 
-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 App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
   const openNotificationWithIcon = (type: NotificationType) => {
-  notification[type]({
+    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;
 ```