docs: refine usePortalManager example

trendmicro-frontend · Oct 14, 2023 · 9073360 · 9073360
1 parent 7effc2c
commit 9073360
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 46 deletions.
diff --git a/packages/react-docs/pages/components/portal-manager/usePortalManager.js b/packages/react-docs/pages/components/portal-manager/usePortalManager.js
@@ -0,0 +1,60 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  usePortalManager,
+} from '@tonic-ui/react';
+import React, { forwardRef, useCallback } from 'react';
+
+const MyModal = forwardRef((
+  {
+    onClose,
+    ...rest
+  },
+  ref,
+) => (
+  <Modal
+    closeOnEsc
+    closeOnOutsideClick
+    isOpen
+    onClose={onClose}
+    size="sm"
+    {...rest}
+  >
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>
+        Modal Header
+      </ModalHeader>
+      <ModalBody>
+        Modal Body
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={onClose}>Close</Button>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+));
+
+MyModal.displayName = 'MyModal';
+
+const App = () => {
+  const portal = usePortalManager();
+  const openModal = useCallback(() => {
+    portal((close) => (
+      <MyModal onClose={close} />
+    ));
+  }, [portal]);
+
+  return (
+    <Button onClick={openModal}>
+      Open Modal
+    </Button>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/portal-manager/usePortalManager.page.mdx b/packages/react-docs/pages/components/portal-manager/usePortalManager.page.mdx
@@ -62,49 +62,4 @@ The `remove` method removes a portal by its id.
 
 Here is an example of how to use `usePortalManager` to create and remove a modal:
 
-```jsx noInline
-render(() => {
-  const portal = usePortalManager();
-  const openModal = React.useCallback(() => {
-    portal((close) => (
-      <MyModal onClose={close} />
-    ));
-  }, [portal]);
-
-  return (
-    <Button onClick={openModal}>
-      Open Modal
-    </Button>
-  );
-});
-
-const MyModal = React.forwardRef((
-  {
-    onClose,
-    ...rest
-  },
-  ref,
-) => (
-  <Modal
-    closeOnEsc
-    closeOnOutsideClick
-    isOpen
-    onClose={onClose}
-    size="sm"
-    {...rest}
-  >
-    <ModalOverlay />
-    <ModalContent>
-      <ModalHeader>
-        Modal Header
-      </ModalHeader>
-      <ModalBody>
-        Modal Body
-      </ModalBody>
-      <ModalFooter>
-        <Button onClick={onClose}>Close</Button>
-      </ModalFooter>
-    </ModalContent>
-  </Modal>
-));
-```
+{render('./usePortalManager')}