The file structure of the examples page has been adjusted. (#54)

* htmlの内容はほぼ同じなため、templateContentを使う

* topのモーダルのオプションを削除する

* prevent-scrollページ作成

WIP

Author: dc7290

examples-routes.js

@@ -0,0 +1,10 @@
+module.exports = [
+  { path: '/', title: 'useModal example' },
+  { path: '/prevent-scroll', title: 'useModal with preventScroll example' },
+  { path: '/close-button', title: 'useModal with closeButton example' },
+  {
+    path: '/close-button/render-option',
+    title: 'useModal with renderCloseButton option example',
+  },
+  { path: '/modal-config', title: 'useModal with ModalConfig example' },
+];

examples/src/close-button/index.html

@@ -1,17 +1,23 @@
 import React, { PropsWithChildren } from 'react';
 import { render } from 'react-dom';
 
+import routes from '../../examples-routes';
+
 import { Modal as CommonModal } from './js';
 import { Modal as CloseButtonModal } from './js/close-button';
 import { Modal as CloseButtonWithRenderOptionModal } from './js/close-button/render-option';
 import { ModalWrapper as ModalConfigModal } from './js/modal-config';
+import { Modal as PreventScrollModal } from './js/prevent-scroll';
 
 const CurrentModal = () => {
   switch (
     window.location.pathname
       .replace(/^\/react-hooks-use-modal/, '')
       .replace(/\/$/, '')
   ) {
+    case '/prevent-scroll': {
+      return <PreventScrollModal />;
+    }
     case '/close-button': {
       return <CloseButtonModal />;
     }
@@ -27,23 +33,17 @@ const CurrentModal = () => {
   }
 };
 
-const routes = [
-  '/',
-  '/close-button',
-  '/close-button/render-option',
-  '/modal-config',
-];
 const Wrapper = ({ children }: PropsWithChildren<{}>) => {
   return (
     <div>
       {children}
       <nav style={{ marginTop: '40px' }}>
-        {routes.map((route, i) => (
+        {routes.map(({ path }, i) => (
           <a
-            href={`/react-hooks-use-modal${route}`}
+            href={`/react-hooks-use-modal${path}`}
             style={{ marginLeft: i !== 0 ? '10px' : '' }}
           >
-            {route}
+            {path}
           </a>
         ))}
       </nav>

examples/src/close-button/render-option/index.html

@@ -9,12 +9,7 @@ const modalStyle: React.CSSProperties = {
 };
 
 export const Modal = () => {
-  const [Modal, open, close, isOpen] = useModal('root', {
-    preventScroll: true,
-    focusTrapOptions: {
-      clickOutsideDeactivates: false,
-    },
-  });
+  const [Modal, open, close, isOpen] = useModal('root');
 
   return (
     <div>

examples/src/index.html

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { useModal } from '../../../../src';
+
+const modalStyle: React.CSSProperties = {
+  backgroundColor: '#fff',
+  padding: '60px 100px',
+  borderRadius: '10px',
+};
+
+export const Modal = () => {
+  const [Modal, open, close, isOpen] = useModal('root', {
+    preventScroll: true,
+  });
+
+  return (
+    <div>
+      <div>Modal is Open? {isOpen ? 'Yes' : 'No'}</div>
+      <button onClick={open}>OPEN</button>
+      <Modal>
+        <div style={modalStyle}>
+          <h1>Title</h1>
+          <p>This is a customizable modal.</p>
+          <button onClick={close}>CLOSE</button>
+        </div>
+      </Modal>
+    </div>
+  );
+};

examples/src/index.tsx

@@ -30,7 +30,6 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "gh-pages": "^2.1.1",
-    "globby": "^11.1.0",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",