alexanderkhivrych/use-modal-hook

🚀 React hook for controlling modal components

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 />
  </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