use-modal-hook ❤️

React hook for controlling modal components

Install

#With npm
npm install use-modal-hook --save

#With yarn
yarn add use-modal-hook

Usage

import React, { memo } from "react";
import { useModal, ModalProvider } from "use-modal-hook";
import Modal from "react-modal"; // It can be any modal
const MyModal = memo(
  ({ isOpen, onClose, title, description, closeBtnLabel }) => (
    <Modal isOpen={isOpen} onRequestClose={onClose}>
      <h2>{title}</h2>
      <div>{description}</div>
      <button onClick={onClose}>{closeBtnLabel}</button>
    </Modal>
  )
);
const SomePage = memo(() => {
  const [showModal, hideModal] = useModal(MyModal, {
    title: "My Test Modal",
    description: "I Like React Hooks",
    closeBtnLabel: "Close"
  });
  return (
    <>
      <h1>Test Page</h1>
      <button onClick={showModal}>Show Modal</button>
    </>
  );
});
const App = () => (
  <ModalProvider>
    <SomePage ></SomePage>
  </ModalProvider>
);

useModal(<ModalComponent: Function|>, <modalProps: Object>, <onClose: Function>): [showModal: Function, hideModal: Function]

showModal(dynamicModalProps: Object)

License

MIT © alexanderkhivrych