Add example for keepMounted option

pradel · Mar 16, 2023 · b0a9d6f · b0a9d6f
1 parent d2c9bb4
commit b0a9d6f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 0 deletions.
diff --git a/website/src/components/ExampleRendered.tsx b/website/src/components/ExampleRendered.tsx
@@ -3,6 +3,7 @@ import ExampleMultiple from '../examples/Multiple';
 import LongContent from '../examples/LongContent';
 import FocusTrapped from '../examples/FocusTrapped';
 import FocusTrappedInitialFocus from '../examples/FocusTrappedInitialFocus';
+import KeepMounted from '../examples/KeepMounted';
 import CustomCssStyle from '../examples/CustomCssStyle';
 import CustomAnimation from '../examples/CustomAnimation';
 import CustomCloseIcon from '../examples/CustomCloseIcon';
@@ -14,6 +15,7 @@ const examples: Record<string, () => JSX.Element> = {
   longContent: LongContent,
   focusTrapped: FocusTrapped,
   focusTrappedInitialFocus: FocusTrappedInitialFocus,
+  keepMounted: KeepMounted,
   customCssStyle: CustomCssStyle,
   customAnimation: CustomAnimation,
   customCloseIcon: CustomCloseIcon,

diff --git a/website/src/docs/index.mdx b/website/src/docs/index.mdx
@@ -8,6 +8,7 @@ A simple responsive and accessible react modal.
 - Multiple modals.
 - Accessible modals.
 - Easily customizable via props.
+- Optionally keep hidden modals mounted to the DOM
 - Typescript support
 - [Small bundle size](https://bundlephobia.com/result?p=react-responsive-modal)
 
@@ -103,6 +104,26 @@ You can also set to trap focus within the modal, but decide where to put focus w
 
 ```
 
+### Keeping a hidden modal mounted
+
+By setting the `keepMounted` property to `true`, you can specify that the modal should always be mounted to the DOM, even when hidden it is hidden.
+Instead of removing the DOM nodes, the modal is hidden using `display: none`.
+
+```js
+<Modal
+  ...
+  keepMounted
+>
+  ...
+</Modal>
+```
+
+This is useful when you want the state of the DOM nodes (e.g. the text inside an `<input>` element) to stay alive, as well as for search engine optimization (Google can see the content of the hidden modal).
+
+Press the button below and watch the element tree in your browser. The modal is a `<div>` at the very bottom of the `<body>`, and will not disappear even when the modal is closed!
+
+<ExampleRendered name="keepMounted" />
+
 ### Custom styling with css
 
 Customising the Modal style via css is really easy. For example if you add the following css to your app you will get the following result:

diff --git a/website/src/examples/KeepMounted.tsx b/website/src/examples/KeepMounted.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Modal } from 'react-responsive-modal';
+
+const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <button className="button" onClick={() => setOpen(true)}>
+        Open modal
+      </button>
+
+      <Modal open={open} onClose={() => setOpen(false)} keepMounted>
+        <div style={{ padding: '24px' }}>
+          This modal will stay mounted even when closed.
+          <br />
+          <br />
+          <input
+            defaultValue="And DOM state of this <input> will be kept alive!"
+            style={{
+              border: '1px solid black',
+              borderRadius: '4px',
+              padding: '2px',
+            }}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default App;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -46,6 +46,14 @@ const IndexPage = () => (
                     Focus Trapped modal
                   </a>
                 </li>
+                <li className="mb-4">
+                  <a
+                    className="text-sm hover:text-watermelon"
+                    href="#keeping-a-hidden-modal-mounted"
+                  >
+                    Keeping a hidden modal mounted
+                  </a>
+                </li>
                 <li className="mb-4">
                   <a
                     className="text-sm hover:text-watermelon"