usemodal-portal
v2.0.3
Published
A React hook to handle with modals, using portal!
Downloads
12
Maintainers
Readme
usemodal-portal
A React hook to handle with modals, using portal!
installation
npm install usemodal-portal
//or
yarn add usemodal-portal
How to use
useModal accepts a function that has the method to close the modal as a parameter and returns a React component.
import { useModal } from 'usemodal-portal'
function YourPage() {
const {Modal, toggleRenderModal} = useModal(
(toggleRenderModal) => <YourModalComponentHere
onClose={toggleRenderModal}
/>
)
return (
<>
<button onClick={toggleRenderModal}>open modal</button>
<Modal />
</>
)
}
By default when modal opens, it will add some styles to your body element to avoid scroll. To disable it, just add a second param to useModal hook:
import { useModal } from 'usemodal-portal'
function YourPage() {
const {Modal, toggleRenderModal} = useModal(
(toggleRenderModal) => <YourModalComponentHere
onClose={toggleRenderModal}
/>,
{ disableBodyControl: true }
)
return (
<>
<button onClick={toggleRenderModal}>open modal</button>
<Modal />
</>
)
}
useModal has typescript support by default and was made using TSDX