react-action-modal-hook

NOTE

A minimalist React Modal Hook using the dialog tag.

If you have any feedback, please feel free to create an issue

Playground

日本語 简体中文 繁體中文

Usage

type Props = {
  disableEsc: boolean,
  unlockBodyScroll: boolean,
};

export const BlurModalTrigger: FC<Props> = ({
  disableEsc = false,
  unlockBodyScroll = false,
}) => {
  const [isClosing, setIsClosing] = useState < boolean > false;

  const onModalClose: OnModalClose = () => {
    // Blur Modal Start Closing
    setIsClosing(true);
    return () => {
      // Blur Modal Closed
      setIsClosing(false);
    };
  };

  const modalCloseDelay = () => {
    return 200;
  };

  const [Modal, openModal, closeModal] = useModal(BlurModal, {
    modalCloseDelay,
    onModalClose,
    disableEsc,
    unlockBodyScroll,
  });

  return (
    <>
      <Button onClick={openModal}>Open Blur Modal</Button>
      <Modal title='Blur Modal' {...{ isClosing, closeModal }}>
        <p>
          Duis cursus ex non ante porta, id maximus lorem luctus. Pellentesque
          nec mauris sed odio mollis congue id sit amet nibh.
        </p>
      </Modal>
    </>
  );
};

Installation

You can install using npm or yarn commands.

npm install --save react-action-modal-hook
yarn add react-action-modal-hook

Syntax

[ModalComponent, openModal, closeModal, isModalOpen, dialogElement] = useModal<ModalTemplateProps>(
  ModalTemplate,
  {
    modalCloseDelay,
    onModalClose,
    disableEsc,
    unlockBodyScroll,
  },
);

| | Type | Description | Required | | :------------------- | :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | ModalComponent | React.FC | Registered Modal Component | | | openModal | () => void | Open the Modal | | | closeModal | () => void | Close the Modal | | isModalOpen | boolean | Modal's toggle state | | | dialogElement | HTMLDialogElement | Dialog element wrapping the Modal | | | ModalTemplateProps | object type | Props for the registered Modal template | | | ModalTemplate | React.FC | Register Modal template | ⚪︎ | | modalCloseDelay | () => number | Milliseconds delay from closeModal start to the Modal closing Default: () => 0 Used for animations | | | onModalClose | (HTMLDialogElement) => void | () => void | Triggered when the Modal is closed. Executed after closeModal. The function returned by onModalClose will be executed after the Modal is closed. | | | disableEsc | boolean | Prevent closing the Modal using the Esc key. Default is false. | | | unlockBodyScroll | boolean | Do not lock Body scroll when the Modal is open. Default is false. | |

Styles

Import CSS

Import the CSS used by the library.

import 'react-action-modal-hook/styles';

Customize CSS

You can customize the CSS as needed. | ClassName | Description | | :---------------------- | :--------------------------------------------------------- | | use-modal-container | The default style for the dialog tag. | | use-modal-scroll-lock | The styles needed to lock the body scroll. |

Global Settings

Add ModalProvider

<ModalProvider>
  <Component />
</ModalProvider>

The following are the props for ModalProvider

| | Description | | :----- | :----------------------------------------------------------------------------------------------- | | key | key for React.createPortal().Reference | | others | All attributes of HTMLDialogElement |

Example

import 'react-action-modal-hook/styles';

type BlurModalProps = {
  children: ReactNode,
  closeModal: () => void,
  isClosing: boolean,
  title: string,
} & HTMLAttributes<HTMLDivElement>;

export const BlurModal: FC<BlurModalProps> = ({
  children,
  isClosing,
  title,
  closeModal,
  ...attributes
}) => {
  return (
    <div
      className={clsx('use-modal-container', isClosing && '-close')}
      {...attributes}
    >
      <div className={'background'} onClick={closeModal}></div>
      <section className={'modal-body'}>
        <header className={'header'}>{title}</header>
        <div className={'main'}>{children}</div>
        <footer className={'footer'}>
          <Button onClick={closeModal}>Close</Button>
        </footer>
      </section>
    </div>
  );
};

type Props = {
  disableEsc: boolean,
  unlockBodyScroll: boolean,
};

export const BlurModalTrigger: FC<Props> = ({
  disableEsc = false,
  unlockBodyScroll = false,
}) => {
  const [isClosing, setIsClosing] = useState < boolean > false;

  const onModalClose: OnModalClose = () => {
    // Blur Modal Start Closing
    setIsClosing(true);
    return () => {
      // Blur Modal Closed
      setIsClosing(false);
    };
  };

  const modalCloseDelay = () => {
    return 200;
  };

  const [Modal, openModal, closeModal] = useModal(BlurModal, {
    modalCloseDelay,
    onModalClose,
    disableEsc,
    unlockBodyScroll,
  });

  return (
    <>
      <Button onClick={openModal}>Open Blur Modal</Button>
      <Modal title='Blur Modal' {...{ isClosing, closeModal }}>
        <p>
          Duis cursus ex non ante porta, id maximus lorem luctus. Pellentesque
          nec mauris sed odio mollis congue id sit amet nibh.
        </p>
      </Modal>
    </>
  );
};

const App = () => {
  return (
    <ModalProvider>
      <BlurModalTrigger />
    </ModalProvider>
  );
};