1.0.1 • Published 2 years ago

react-action-modal-hook v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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,
  },
);
TypeDescriptionRequired
ModalComponentReact.FCRegistered Modal Component
openModal() => voidOpen the Modal
closeModal() => voidClose the Modal
isModalOpenbooleanModal's toggle state
dialogElementHTMLDialogElementDialog element wrapping the Modal
ModalTemplatePropsobject typeProps for the registered Modal template
ModalTemplateReact.FCRegister Modal template⚪︎
modalCloseDelay() => numberMilliseconds delay from closeModal start to the Modal closing Default: () => 0 Used for animations
onModalClose(HTMLDialogElement) => void | () => voidTriggered when the Modal is closed. Executed after closeModal. The function returned by onModalClose will be executed after the Modal is closed.
disableEscbooleanPrevent closing the Modal using the Esc key. Default is false.
unlockBodyScrollbooleanDo 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
keykey for React.createPortal().Reference
othersAll 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>
  );
};
1.0.1

2 years ago

1.0.0

2 years ago

1.0.0-beta.6

2 years ago

1.0.0-beta.7

2 years ago

1.0.0-beta.5

2 years ago

1.0.0-beta.4

2 years ago

1.0.0-beta.3

2 years ago

1.0.0-beta.2

2 years ago

1.0.0-beta

2 years ago