use-modal-hook
v2.1.2
Published
React hook for controlling modal components
Downloads
1,620
Maintainers
Readme
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