diff --git a/src/components/portal-provider/demos/demo1.tsx b/src/components/portal-provider/demos/demo1.tsx
index 29f7ac3f2c..401dbd9fb6 100644
--- a/src/components/portal-provider/demos/demo1.tsx
+++ b/src/components/portal-provider/demos/demo1.tsx
@@ -1,9 +1,12 @@
 import {
   Button,
   ConfigProvider,
+  Modal,
+  Popup,
   PortalProvider,
   Space,
   useModal,
+  usePortal,
 } from 'antd-mobile'
 import enUS from 'antd-mobile/es/locales/en-US'
 import { DemoBlock } from 'demos'
@@ -14,8 +17,9 @@ export default () => {
     <>
       <DemoBlock title='English'>
         <ConfigProvider locale={enUS}>
-          {/* to make sure that `<PortalProvider />` is wrapped inner `<ConfigProvider />` so that `<ComponentWantsToUseModal />` can access context from `<ConfigProvider />` */}
+          {/* to make sure that `<PortalProvider />` is wrapped inner `<ConfigProvider />` so that its children can access context from `<ConfigProvider />` */}
           <PortalProvider>
+            <ComponentWantsToUsePortal />
             <ComponentWantsToUseModal />
           </PortalProvider>
         </ConfigProvider>
@@ -24,6 +28,36 @@ export default () => {
   )
 }
 
+const ComponentWantsToUsePortal = () => {
+  const { renderModalInPortal } = usePortal()
+  return (
+    <Space direction='vertical'>
+      <Button
+        block
+        shape='rounded'
+        color='primary'
+        size='large'
+        onClick={() => {
+          renderModalInPortal(<Modal />)
+        }}
+      >
+        render modal
+      </Button>
+      <Button
+        block
+        shape='rounded'
+        color='primary'
+        size='large'
+        onClick={() => {
+          renderModalInPortal(<Popup />)
+        }}
+      >
+        render popup
+      </Button>
+    </Space>
+  )
+}
+
 const ComponentWantsToUseModal = () => {
   const { show, confirm, alert, clear } = useModal()
   return (
diff --git a/src/components/portal-provider/index.zh.md b/src/components/portal-provider/index.zh.md
index 22e9166c15..5bffc84f4e 100644
--- a/src/components/portal-provider/index.zh.md
+++ b/src/components/portal-provider/index.zh.md
@@ -15,5 +15,5 @@
 ### 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- | --- |
-| children | 需要用到 `useModal` 的子组件 (一般是应用入口) | `Locale` | [zh-CN] | - |
+| --- | --- | --- | --- |
+| children | 需要用到 `useModal` 的子组件 (一般是应用入口) | `ReactNode` | - |
diff --git a/src/components/portal-provider/portal-provider.tsx b/src/components/portal-provider/portal-provider.tsx
index 69edc80f6f..76d835adaf 100644
--- a/src/components/portal-provider/portal-provider.tsx
+++ b/src/components/portal-provider/portal-provider.tsx
@@ -30,6 +30,9 @@ interface WrapperProps {
   unmount: () => void
 }
 
+/**
+ * @description refer to `src/utils/render-imperatively`
+ */
 const Wrapper = React.forwardRef<ImperativeHandler, WrapperProps>(
   ({ element, unmount }, ref) => {
     const [visible, setVisible] = useState(false)
diff --git a/src/index.ts b/src/index.ts
index ed9f32e8d8..5886e5bc14 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -171,7 +171,10 @@ export type {
 } from './components/popover'
 export { default as Popup } from './components/popup'
 export type { PopupProps } from './components/popup'
-export { default as PortalProvider } from './components/portal-provider'
+export {
+  default as PortalProvider,
+  usePortal,
+} from './components/portal-provider'
 export type { PortalProviderProps } from './components/portal-provider'
 export { default as ProgressBar } from './components/progress-bar'
 export type { ProgressBarProps } from './components/progress-bar'