/use-modal-hook

🚀 React hook for controlling modal components

Primary LanguageJavaScriptMIT LicenseMIT


use-modal-hook ❤️



PRs welcome npm package npm downloads Maintenance

React hook for controlling modal components

Install

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

Usage

Edit react use modal hook example

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