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

showModal(dynamicModalProps: Object)

Param | Type | Description --- | --- | --- dynamicModalProps | Object | Dynamic props that you want to pass to your modal component

License

MIT © alexanderkhivrych