Modal Demo
Deep DiveExamplesGetting StartedIntroductionFeaturesMotivation



NPM JavaScript Style Guide

react-stateless-modal is a react library that lets users to create modals anywhere without having to go through the pain of maintaining state variables. The library not only comes with a default animation but also allows users to add custom animations. The library gives the users the flexibility of creating nested modals and lots of other controls. The library additionally provides an option to mount the Modal component directly.


  • Extreme Flexibility : Create modals anywhere, nest multiple modals, customize animations, style the modal, pass components or strings to header, body and footer, control the modal's closing conditions by setting whether the modal should close on pressing ESC key.
  • Stateless Maintenance: Forget about maintaining states for your modals. Spawn a modal in any component just by calling the openModal method.
  • Auto Mounting: Pass the content of the modal using openModal method and the library will mount the component for you.
  • Universal Mounting: Mount a modal anywhere either inside a component or inside a modal ( allows modal nesting).
  • Component Mode: An optional feature that lets you mount the Modal component.


The modal libraries in existence such as react-responsive-modal requires users to maintain state variables for the creation of each modal, which can become painful while maintaining a large codebase that involves multiple modals. This library eliminates the above problem by letting users create modals without having to create and maintain state variables.