@jdthornton/animated-modal NPM

@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