Merge pull request #24 from kuroppe1819/feature/close-on-overlay-click

add option that don't close on overlay click.

Author: shibe97

README.md

@@ -12,6 +12,7 @@ import { useModal } from 'react-hooks-use-modal';
 const App = () => {
   const [Modal, open, close, isOpen] = useModal('root', {
     preventScroll: true,
+    closeOnOverlayClick: false;
   });
   return (
     <div>
@@ -32,7 +33,7 @@ render(<App />, document.getElementById('root'));
 
 ## Syntax
 
-### [ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { preventScroll? })
+### [ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { preventScroll?, closeOnOverlayClick? })
 
 `ModalComponent`
 Modal component that displays children in the screen center.
@@ -56,6 +57,10 @@ You can specify the output destination domNode with this argument
 Optional to prevent scrolling while modal is open.
 Default value is false.
 
+`closeOnOverlayClick`
+Optional to close modal when click the overlay.
+Default value is true.
+
 ## Demo
 
 https://microcmsio.github.io/react-hooks-use-modal/

examples/src/index.tsx

@@ -11,6 +11,7 @@ const modalStyle: React.CSSProperties = {
 const App = () => {
   const [Modal, open, close, isOpen] = useModal('root', {
     preventScroll: true,
+    closeOnOverlayClick: false,
   });
   return (
     <div>

src/index.tsx

@@ -5,12 +5,13 @@ import disableScroll from 'disable-scroll';
 export interface ModalProps {
   children: React.ReactNode;
   isOpen: boolean;
-  close: () => void;
+  onOverlayClick: React.MouseEventHandler<HTMLDivElement>;
   elementId: 'root' | string;
 };
 
 export interface ModalOptions {
   preventScroll?: boolean;
+  closeOnOverlayClick?: boolean;
 };
 
 export type UseModal = (
@@ -35,7 +36,7 @@ const wrapperStyle: React.CSSProperties = {
   zIndex: 1000,
 };
 
-const maskStyle: React.CSSProperties = {
+const overlayStyle: React.CSSProperties = {
   position: 'fixed',
   top: 0,
   left: 0,
@@ -50,21 +51,21 @@ const containerStyle: React.CSSProperties = {
   zIndex: 100001,
 };
 
-const Modal: React.FC<ModalProps> = ({ children, isOpen = false, close, elementId = 'root' }) => {
+const Modal: React.FC<ModalProps> = ({ children, isOpen = false, onOverlayClick, elementId = 'root' }) => {
   if (isOpen === false) {
     return null;
   }
   return createPortal(
     <div style={wrapperStyle}>
-      <div style={maskStyle} onClick={close} />
+      <div style={overlayStyle} onClick={onOverlayClick} />
       <div style={containerStyle}>{children}</div>
     </div>,
     document.getElementById(elementId) as HTMLElement
   );
 };
 
 export const useModal: UseModal = (elementId = 'root', options = {}) => {
-  const { preventScroll = false } = options;
+  const { preventScroll = false, closeOnOverlayClick = true } = options;
   const [isOpen, setOpen] = useState<boolean>(false);
   const open = useCallback(() => {
     setOpen(true);
@@ -78,11 +79,17 @@ export const useModal: UseModal = (elementId = 'root', options = {}) => {
       disableScroll.off();
     }
   }, [setOpen, preventScroll]);
+  const onOverlayClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    if (closeOnOverlayClick) {
+      close();
+    }    
+  }, [closeOnOverlayClick, close]);
 
   const ModalWrapper = useCallback(
     ({ children }) => {
       return (
-        <Modal isOpen={isOpen} close={close} elementId={elementId}>
+        <Modal isOpen={isOpen} onOverlayClick={onOverlayClick} elementId={elementId}>
           {children}
         </Modal>
       );