rsuite · simonguo · May 26, 2025 · May 23, 2025 · May 24, 2025 · May 26, 2025
diff --git a/docs/component.config.json b/docs/component.config.json
@@ -856,6 +856,13 @@
     "id": "hooks",
     "name": "Hooks",
     "children": [
+      {
+        "id": "use-dialog",
+        "name": "useDialog",
+        "title": "",
+        "hooks": ["useDialog"],
+        "version": "6.0.0"
+      },
       {
         "id": "use-media-query",
         "name": "useMediaQuery",

diff --git a/docs/pages/components/message/en-US/index.md b/docs/pages/components/message/en-US/index.md
@@ -10,39 +10,57 @@ Used to show important tips on a page.
 
 ### Basic
 
+Default message box style.
+
 <!--{include:`basic.md`}-->
 
 ### Types
 
+Set different message types using the `type` prop: `info`, `success`, `warning`, and `error`.
+
 <!--{include:`types.md`}-->
 
 ### With header and actions
 
+Add a header using the `header` prop and include action buttons in the message content.
+
 <!--{include:`header.md`}-->
 
 ### With icon
 
+Display icons corresponding to the message type using the `showIcon` prop.
+
 <!--{include:`icons.md`}-->
 
 ### Bordered
 
+Add a border around the message box using the `bordered` prop.
+
 <!--{include:`bordered.md`}-->
    
 ### Centered
 
+Vertically center the message box within its container using the `centered` prop.
+
 <!--{include:`centered.md`}-->
 
 ### Closable
 
+Add a close button with the `closable` prop and handle the close event with `onClose` callback.
+
 <!--{include:`close.md`}-->
 
 ### Full
 
+Make the message box fill its parent container using the `full` prop.
+
 <!--{include:`full.md`}-->
 
 ### With toaster
 
-A message type that contains an Alert
+Demonstrates how to use the Message component with `toaster` to display messages containing an `Alert` component.
+
+> **Note**: `useToaster` must be used inside a `CustomProvider`. If your application is not wrapped with `CustomProvider`, make sure to wrap your app with `<CustomProvider>` before using `useToaster`, otherwise you may see a warning.
 
 <!--{include:`with-toaster.md`}-->
 

diff --git a/docs/pages/components/message/zh-CN/index.md b/docs/pages/components/message/zh-CN/index.md
@@ -10,39 +10,57 @@
 
 ### 默认
 
+默认的消息框样式。
+
 <!--{include:`basic.md`}-->
 
 ### 消息类型
 
+通过 `type` 属性设置不同的消息类型：`info`、`success`、`warning` 和 `error`。
+
 <!--{include:`types.md`}-->
 
 ### 带标题和操作
 
+通过 `header` 属性添加标题，并在消息内容中添加操作按钮。
+
 <!--{include:`header.md`}-->
 
 ### 显示图标
 
+使用 `showIcon` 属性显示与消息类型对应的图标。
+
 <!--{include:`icons.md`}-->
 
 ### 带边框
 
+使用 `bordered` 属性为消息框添加边框。
+
 <!--{include:`bordered.md`}-->
 
 ### 垂直居中
 
+使用 `centered` 属性使消息框在容器中垂直居中显示。
+
 <!--{include:`centered.md`}-->
 
 ### 可关闭的
 
+使用 `closable` 属性添加关闭按钮，并可通过 `onClose` 回调处理关闭事件。
+
 <!--{include:`close.md`}-->
 
 ### 消息框撑满容器
 
+使用 `full` 属性使消息框撑满其父容器。
+
 <!--{include:`full.md`}-->
 
 ### 与 toaster 组合
 
-一种包含 Alert 的消息类型
+展示如何与 `toaster` 组件结合使用，显示包含 `Alert` 组件的消息。

+> **注意**：`useToaster` 必须在 `CustomProvider` 内部使用。如果您的应用未使用 `CustomProvider` 包装，请确保在使用 `useToaster` 前添加 `<CustomProvider>` 包装您的应用，否则可能会收到警告提示。
 
 <!--{include:`with-toaster.md`}-->
 

diff --git a/docs/pages/components/notification/en-US/index.md b/docs/pages/components/notification/en-US/index.md
@@ -10,18 +10,28 @@ Used for system notifications. Generally used to push messages.
 
 ### Basic
 
+Default notification style.
+
 <!--{include:`basic.md`}-->
 
 ### Types
 
+Set different notification types using the `type` prop: `info`, `success`, `warning`, and `error`.
+
 <!--{include:`type.md`}-->
 
 ### Closeable
 
+Add a close button with the `closable` prop and handle the close event with `onClose` callback.
+
 <!--{include:`close.md`}-->
 
 ### With toaster
 
+Demonstrates how to use the Notification component with `toaster` to display notification messages.
+
+> **Note**: `useToaster` must be used inside a `CustomProvider`. If your application is not wrapped with `CustomProvider`, make sure to wrap your app with `<CustomProvider>` before using `useToaster`.
+
 <!--{include:`with-toaster.md`}-->
 
 ## Props

diff --git a/docs/pages/components/notification/zh-CN/index.md b/docs/pages/components/notification/zh-CN/index.md
@@ -10,18 +10,28 @@
 
 ### 默认
 
+默认的通知框样式。
+
 <!--{include:`basic.md`}-->
 
 ### 通知类型
 
+通过 `type` 属性设置不同的通知类型：`info`、`success`、`warning` 和 `error`。
+
 <!--{include:`type.md`}-->
 
 ### 可关闭的
 
+使用 `closable` 属性添加关闭按钮，并可通过 `onClose` 回调处理关闭事件。
+
 <!--{include:`close.md`}-->
 
 ### 与 toaster 组合
 
+展示如何与 `toaster` 组件结合使用，显示通知消息。
+
+> **注意**：`useToaster` 必须在 `CustomProvider` 内部使用。如果您的应用未使用 `CustomProvider` 包装，请确保在使用 `useToaster` 前添加 `<CustomProvider>` 包装您的应用。
+
 <!--{include:`with-toaster.md`}-->
 
 ## Props

diff --git a/docs/pages/components/toaster/en-US/index.md b/docs/pages/components/toaster/en-US/index.md
@@ -10,18 +10,26 @@ Toaster display brief, temporary notifications of actions, errors, or other even
 
 ### With Message
 
+Demonstrates how to use Toaster with the `Message` component to display temporary message notifications.
+
 <!--{include:`with-message.md`}-->
 
 ### With Notification
 
+Shows how to integrate Toaster with the `Notification` component for more detailed notifications.
+
 <!--{include:`with-notification.md`}-->
 
 ### Custom Toast
 
+Illustrates how to create custom-styled Toast messages, including custom content and styling.
+
 <!--{include:`custom.md`}-->
 
 ### Custom Container
 
+Demonstrates how to render Toast messages to a specified DOM container instead of the default body.
+
 <!--{include:`custom-container.md`}-->
 
 ## Hooks

diff --git a/docs/pages/components/toaster/zh-CN/index.md b/docs/pages/components/toaster/zh-CN/index.md
@@ -10,18 +10,24 @@ Toaster 用于在应用程序中显示简短的、临时的通知，用于表示
 
 ### 与 Message 组合
 
+展示如何将 Toaster 与 `Message` 组件结合使用，显示临时消息通知。
+
 <!--{include:`with-message.md`}-->
 
 ### 与 Notification 组合
 
-<!--{include:`with-notification.md`}-->
+展示如何将 Toaster 与 `Notification` 组件结合使用，显示更丰富的通知内容。
 
+<!--{include:`with-notification.md`}-->
 ### 自定义 Toast
 
-<!--{include:`custom.md`}-->
+展示如何创建自定义样式的 Toast 消息，包括自定义内容和样式。
 
+<!--{include:`custom.md`}-->
 ### 自定义容器
 
+演示如何将 Toast 消息渲染到指定的 DOM 容器中，而不是默认的 body。
+
 <!--{include:`custom-container.md`}-->
 
 ## Hooks

diff --git a/docs/pages/components/use-dialog/en-US/index.md b/docs/pages/components/use-dialog/en-US/index.md
@@ -0,0 +1,144 @@
+# useDialog
+
+`useDialog` is a React Hook that provides a declarative way to display different types of dialogs (alert, confirm, prompt) and custom dialogs.
+
+## Usage
+
+<div class="rs-doc-steps">
+
+<h3 class="rs-doc-step-header">Install CustomProvider</h3>
+
+<div class="rs-doc-step-body">
+
+The first thing you need to do is install CustomProvider at the root of your application to manage the dialog rendering container.
+
+```jsx
+import { CustomProvider } from 'rsuite';
+
+function App({ children }) {
+  return <CustomProvider>{children}</CustomProvider>;
+}
+```
+
+</div>
+
+<h3 class="rs-doc-step-header">Using useDialog</h3>
+
+<div class="rs-doc-step-body">
+
+```jsx
+import { useDialog } from 'rsuite';
+
+function MyApp() {
+  const dialog = useDialog();
+
+  // Alert dialog
+  dialog.alert('Hello, world!');
+
+  // Confirm dialog
+  dialog.confirm('Are you sure?');
+
+  // Prompt dialog
+  dialog.prompt('What is your name?');
+
+  // Custom dialog
+  dialog.open(CustomDialog);
+}
+```
+
+</div>
+</div>
+
+## Examples
+
+### Alert Dialog
+
+Similar to `window.alert`, it opens a dialog to display a message to the user.
+
+<!--{include:`alert.md`}-->
+
+### Confirm Dialog
+
+Similar to `window.confirm`, it opens a dialog to ask the user a question.
+
+<!--{include:`confirm.md`}-->
+
+### Prompt Dialog
+
+Similar to `window.prompt`, it opens a dialog to ask the user to input some text.
+
+<!--{include:`prompt.md`}-->
+
+### Prompt Dialog with Validation
+
+You can add validation to prompt dialogs to ensure the input meets certain criteria before allowing the user to proceed.
+
+<!--{include:`prompt-validation.md`}-->
+
+### Custom Dialog
+
+Displays a custom dialog component.
+
+<!--{include:`custom.md`}-->
+
+### Stacked Dialogs
+
+<!--{include:`stacked.md`}-->
+
+## API
+
+### `useDialog()`
+
+Returns an object containing the following methods:
+
+| Property | Type                                                                                                               | Description                 |
+| -------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------- |
+| alert    | (message: ReactNode, options?: [AlertOptions](#code-ts-alert-options-code)) => Promise&lt;void&gt;               | Shows an alert dialog       |
+| confirm  | (message: ReactNode, options?: [ConfirmOptions](#code-ts-confirm-options-code)) => Promise&lt;boolean&gt;        | Shows a confirmation dialog |
+| prompt   | (message: ReactNode, options?: [PromptOptions](#code-ts-prompt-options-code)) => Promise&lt;string&gt;           | Shows a prompt dialog       |
+| open     | (component: ComponentType, payload?: P, options?: [OpenOptions](#code-ts-open-options-code)) => Promise&lt;T&gt; | Shows a custom dialog       |
+
+### Type Definitions
+
+#### `ts:AlertOptions`
+
+```ts
+interface AlertOptions {
+  title?: string; // Dialog title, defaults to 'Alert'
+  okText?: string; // Text for the OK button, defaults to 'OK'
+  onClose?: () => void; // Callback when dialog is closed
+}
+```
+
+#### `ts:ConfirmOptions`
+
+```ts
+interface ConfirmOptions {
+  title?: string; // Dialog title, defaults to 'Confirm'
+  okText?: string; // Text for the OK button, defaults to 'OK'
+  cancelText?: string; // Text for the Cancel button
+  severity?: 'info' | 'success' | 'warning' | 'error'; // Visual style of the dialog
+  onClose?: (result: boolean) => void; // Callback when dialog is closed
+}
+```
+
+#### `ts:PromptOptions`
+
+```ts
+interface PromptOptions {
+  title?: string; // Dialog title, defaults to 'Confirm'
+  okText?: string; // Text for the OK button, defaults to 'OK'
+  cancelText?: string; // Text for the Cancel button
+  defaultValue?: string; // Default value for the input field
+  validate?: (value: string) => [isValid: boolean, errorMessage?: string]; // Validation function
+  onClose?: (result: string) => void; // Callback when dialog is closed
+}
+```
+
+#### `ts:OpenOptions`
+
+```ts
+interface OpenOptions<T> {
+  onClose?: (result?: T) => void; // Callback when dialog is closed
+}
+```