usemodal-portal

usemodal-portal

A React hook to handle with modals, using portal!

codesandbox example

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