react-modal alternatives and similar libraries
Based on the "Overlay" category.
Alternatively, view react-modal alternatives based on common mentions on social networks and blogs.
-
sweetalert2
β¨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. πΊπ¦πͺπΊ -
sweetalert2-react-content
Official SweetAlert2 enhancer adding support for React elements as content -
modali
A delightful modal dialog component for React, built from the ground up to support React Hooks.
Civic Auth - Auth in Less Than 5 Minutes

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-modal or a related project?
README
react-modal
NOTE
Need feedback to push a new version of react-modal
forward. See issue #881.
Accessible modal dialog component for React.JS
Table of Contents
Installation
To install, you can use npm or yarn:
$ npm install --save react-modal
$ yarn add react-modal
To install react-modal in React CDN app:
Add this CDN script tag after React CDN scripts and before your JS files (for example from cdnjs):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js" integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Use
<ReactModal>
tag inside your React CDN app.
API documentation
The primary documentation for react-modal is the reference book, which describes the API and gives examples of its usage.
Examples
Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};
// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement');
function App() {
let subtitle;
const [modalIsOpen, setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = '#f00';
}
function closeModal() {
setIsOpen(false);
}
return (
<div>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
}
ReactDOM.render(<App />, appElement);
You can find more examples in the examples
directory, which you can run in a
local development server using npm start
or yarn run start
.
Demos
There are several demos hosted on CodePen which demonstrate various features of react-modal: