react-tiny-modal

A super tiny, fully typed, zero dependency modal.

React Tiny Modal has absolutely zero opinions about style or content, bring your own! It's just here to deal with the silly portaling, animations, and clicking outside so you don't have to.

API:

isOpen : boolean Guess.

className : string ClassNames to be applied to the modal background. Change the color, add a blur, etc.

portalElement : Element An element to portal into to attach the modal. Optional.

onClose : React.MouseEventHandler<HTMLDivElement> Fires when the modal background is clicked. Optional.

Usage:

import { Modal } from 'react-tiny-modal'

const [showModal, setShowModal] = React.useState(false)

...

<button onClick={() => setShowModal(true)}>open the modal!</button>

<Modal isOpen={showModal} onClose={() => setShowModal(false)}>
  <button onClick={() => setShowModal(false)}>close the modal!</button>
</Modal>