Use-modal-hook NPM

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 />
  </ModalProvider>
);

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

Param	Type	Description
ModalComponent	`Function`	It can be any `react` component that you want to use for show modal
modalProps	`Object`	Props that you want to pass to your modal component
showModal	`Function`	It is function for show your modal, you can pass any dynamic props to this function
hideModal	`Function`	It is function for hide your modal, you can pass any dynamic props to this function
onClose	`Function`	It callback will be triggered after modal window closes