@jdthornton/animated-modal

React animated modal component.

Demo

https://jdthornton.github.io/#/animated-modal

Install

$ npm install @jdthornton/animated-modal

Usage

import AnimatedModal, { useModal } from "@jdthornton/animated-modal";
import '@jdthornton/animated-modal/styles.css';

function App(){

  const { isOpen, open, close } = useModal();

  return(
    <AnimatedModal isOpen={isOpen} close={close}>
      Modal
    </AnimatedModal>
  )
}

Props

Prop	Type	Description
isOpen	boolean	Modal is open when value is set to true
openClassName	string	The modal class applied when the modal is open
openStyle	object	The modal style applied when the modal is open
close	Function	The modal close handler
showCloseButton	boolean	Shows a modal close button
closeOnOverlayClick	boolean	Closes the modal on overlay click
closeOnEsc	boolean	Closes the modal on 'ESC' key press
inertQuerySelector	string	The query selector for the element to be made inert when the modal is open
className	string	The modal class
style	object	The modal style
overlayClassName	string	The overlay class
overlayStyle	object	The overlay style
labelledBy	string	The aria-labelledby attribute
describedBy	string	The aria-describedby attribute