Basic Modal

The demo below shows how to spawn a basic modal using the openModal function.

Component Mode

You may spawn a modal by directly mounting the Modal component. You'll have to pass 2 additional props namely open and onClose. The example below depicts a simple usage of this feature.

Custom Animation

Don't like the the default fade-in animation ? No Problem! customize how your modal animates by choosing one among 'fade-in', 'bounce' and 'zoom-n' animation.

Note: You can also add your own custom animation by passing custom classNames to the modal. read more

Modal with custom classNames

Provide custom classNames to parts of your modal. Provide custom classNames to the overlay, modal and close icon.

Mount modals on a custom container

The body serves as the default container for all the modals. You can choose to mount your modal on a container of your choosing by providing the container id.

Close on Escape

Control the modal's closing conditions by passing a boolean value for closeOnEscape

Nested Modal

The library gives you the flexibility to spawn modals inside modals. The demo below depicts the same.

Closing a modal with closeModal function

The closeModal function can be used to close one or more modals. The demo below depicts the same.