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>
  );
};