Feature components option (#56)

* componentsオプション仮実装

* examples実装

* 引数でコンポーネントを渡す設計をやめる

* README追記

* ModalProviderでvalueを介す必要をなくす

* elementIdの型をREADMEに合わせる

* 修正

* 不要になったファイルを削除z

* README: ModelProviderのvalueオプションを削除

Author: dc7290

README.md

@@ -38,7 +38,9 @@ render(<App />, document.getElementById('root'));
 ### [ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { preventScroll?, focusTrapOptions?, showCloseButton?, renderCloseButton? })
 
 `ModalComponent`
+Type: React.FC<{ title?: React.ReactNode; description?: React.ReactNode, children?: React.ReactNode }>
 Modal component that displays children in the screen center.
+If you specify `title` and `description`, you must implement custom components with the `components` option's `Modal` property and render in them.
 
 `openFunc`
 A function to open modal.
@@ -71,44 +73,74 @@ useModal('root', {
 });
 ```
 
-`showCloseButton`
-Optional to choose whether to add a close button in the upper right corner.
-Default value is false.
-
-`renderCloseButton`
-Type: (close: () => void) => React.ReactElement
+`components`
 Optional.
-Can be specified when `showCloseButton` is true, allowing you to override the default close button and implement your own close button.
-Use the following
+This is an option to customize the `ModalWrapper` returned by useModal.
+Use as follows
 
 ```jsx
 useModal('root', {
-  showCloseButton: true,
-  renderCloseButton: (close) => (
-    <button
-      style={{
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: '20px',
-        margin: '0 auto',
-        width: '100px',
-      }}
-      onClick={close}
-      type="button"
-    >
-      Close
-    </button>
-  ),
+  components: {
+    Modal: ({ title, description, children }) => {
+      return (
+        <div
+          style={{
+            padding: '60px 100px',
+            backgroundColor: '#fff',
+            borderRadius: '10px',
+          }}
+        >
+          {title && <h1>{title}</h1>}
+          {description && <p>{description}</p>}
+          {children}
+        </div>
+      );
+    },
+    Overlay: () => {
+      return (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          }}
+        />
+      );
+    },
+    Wrapper: ({ children }) => {
+      return (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1000,
+          }}
+        >
+          {children}
+        </div>
+      );
+    },
+  },
 });
 ```
 
+Combined with `ModalProvider` (described below), you can specify the default style for all `useModal` in the project.
+
 ## Global Settings
 
 The `ModalProvider` component allows you to apply a common default configuration to all `useModal` hooks.
 
 ```jsx
-<ModalProvider value={options}>
+<ModalProvider {...options}>
   <Component />
 </ModalProvider>
 ```
@@ -135,11 +167,7 @@ const Component2 = () => {
 
 const App = () => {
   return (
-    <ModalProvider
-      value={{
-        preventScroll: true,
-      }}
-    >
+    <ModalProvider preventScroll>
       <Component1 />
       <Component2 />
     </ModalProvider>

examples-routes.js

@@ -1,10 +1,12 @@
 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: '/prevent-scroll',
+    title: 'useModal with preventScroll option example',
   },
   { path: '/modal-provider', title: 'useModal with ModalProvider example' },
+  {
+    path: '/components-option',
+    title: 'useModal with components option example',
+  },
 ];

examples/src/index.tsx

@@ -4,8 +4,7 @@ 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 ComponentsOptionModal } from './js/components-option';
 import { ModalWrapper as ModalProviderModal } from './js/modal-config';
 import { Modal as PreventScrollModal } from './js/prevent-scroll';
 
@@ -18,15 +17,12 @@ const CurrentModal = () => {
     case '/prevent-scroll': {
       return <PreventScrollModal />;
     }
-    case '/close-button': {
-      return <CloseButtonModal />;
-    }
-    case '/close-button/render-option': {
-      return <CloseButtonWithRenderOptionModal />;
-    }
     case '/modal-provider': {
       return <ModalProviderModal />;
     }
+    case '/components-option': {
+      return <ComponentsOptionModal />;
+    }
     default: {
       return <CommonModal />;
     }
@@ -40,6 +36,7 @@ const Wrapper = ({ children }: PropsWithChildren<{}>) => {
       <nav style={{ marginTop: '40px' }}>
         {routes.map(({ path }, i) => (
           <a
+            key={path}
             href={`/react-hooks-use-modal${path}`}
             style={{ marginLeft: i !== 0 ? '10px' : '' }}
           >

examples/src/js/close-button/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ModalProvider, useModal } from '../../../../src';
+
+const Modal = () => {
+  const [Modal, open, close, isOpen] = useModal('root');
+
+  return (
+    <div>
+      <div>Modal is Open? {isOpen ? 'Yes' : 'No'}</div>
+      <button onClick={open}>OPEN</button>
+      <Modal title="Title" description="This is a customizable modal.">
+        <button onClick={close}>CLOSE</button>
+      </Modal>
+    </div>
+  );
+};
+const ModalWithOverrideOptions = () => {
+  const [Modal, open, close, isOpen] = useModal('root', {
+    components: {
+      Modal: ({ title, description, children }) => {
+        return (
+          <div
+            style={{
+              padding: '60px 100px',
+              backgroundColor: 'cyan', // override
+              borderRadius: '10px',
+            }}
+          >
+            {title && <h1>{title}</h1>}
+            {description && <p>{description}</p>}
+            {children}
+          </div>
+        );
+      },
+    },
+  });
+
+  return (
+    <div style={{ marginTop: '40px' }}>
+      <div>Overrided style modal is Open? {isOpen ? 'Yes' : 'No'}</div>
+      <button onClick={open}>OPEN</button>
+      <Modal title="Title" description="This is a customizable modal.">
+        <button onClick={close}>CLOSE</button>
+      </Modal>
+    </div>
+  );
+};
+
+export const ModalWrapper = () => {
+  return (
+    <ModalProvider
+      focusTrapOptions={{
+        clickOutsideDeactivates: true,
+      }}
+      components={{
+        Modal: ({ title, description, children }) => {
+          return (
+            <div
+              style={{
+                padding: '60px 100px',
+                backgroundColor: '#fff',
+                borderRadius: '10px',
+              }}
+            >
+              {title && <h1>{title}</h1>}
+              {description && <p>{description}</p>}
+              {children}
+            </div>
+          );
+        },
+      }}
+    >
+      <Modal />
+      <ModalWithOverrideOptions />
+    </ModalProvider>
+  );
+};

examples/src/js/close-button/render-option.tsx

@@ -49,10 +49,8 @@ const ModalWithOverrideOptions = () => {
 export const ModalWrapper = () => {
   return (
     <ModalProvider
-      value={{
-        focusTrapOptions: {
-          clickOutsideDeactivates: true,
-        },
+      focusTrapOptions={{
+        clickOutsideDeactivates: true,
       }}
     >
       <Modal />