18 React Modal Component Example
1.React Modal Manager
A cool modal manager for react.
Demo: https://afeiship.github.io/react-modal-manager/
View on Github
2.Reactjs Popup
React Popup Component - Modals,Tooltips and Menus — All in one
Reactjs-popup is a simple react popup component with a lot of benefits :
- Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. 😮
- Does not inject HTML outside your app root. 📦
- Function as children pattern to take control over your popup anywhere in your code. 💪
- Modal, Tooltip, Menu : All in one 🏋️
- Full style customization 👌
- Easy to use. 🚀
- IE Support.🚀
- TypeScript Support 👌
- All these clocks in at around 3 kB zipped. ⚡️
Requires React >= 16.0
3.React Router Modal Gallery
A simple package to create modal gallery with react-router
This is a simple package for the react-router to implement url based modals. It is mainly based on the Modal Gallery example on React Training/React Router with a little bit of enhancing and some reusable components like ModalRoute, ModalLink and ModalSwitch.
Besides all of the implementation is made by using JavaScript, the components that you can use has TypeScript definitions in index.d.ts file. Thus, you can use them in your TypeScript projects.
You may use this package if you want to render modals like Twitter, Facebook or Pinterest style. It will handle the history and location by default and you can use any modal component from your favorite UI library (material-ui, ant-design etc.)! You can find an example for material-ui at ./demo folder. Also, there is a more complete application that uses this package here.
Live Demo: https://react-router-modal-gallery.netlify.com/movies
4.React Awesome Modal
A Simple React Modal Component .This repository is deprecated. But I created a new modal package which uses react hooks. It’s easier and more intuitive. Prease look at the new repository.
5.React Modal Video
Accessible React Modal Video Component
Features
- Not affected by dom structure.
- Beautiful transition
- Accessible for keyboard navigation and screen readers.
- Rich options for youtube API and Vimeo API
6.React Drag Drawer
A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop. Mobile draggable drawer that falls back to modals on desktop
7.React Portals
React library to send nodes into a node at a different place in the component tree .Unopinionated React library to render content into another place of the React tree (without losing the React context). This is especially useful for modals or popovers.
Advantages
- Build your own portals and portal targets for your own needs with the provided higher order components
- Decide where your portaled content should be rendered by placing the portal target whereever you want it in your React tree.
- Keep your context! react-router or react-redux use the React context to enable communication between components, this will not work with traditional modal or portal libraries, as they render your components into another React Root (often in document.body).
8.Focus Trap React
A React component that traps focus.This component is a light wrapper around focus-trap, tailored to your React-specific needs.You might want it for, say, building an accessible modal?
Please read the focus-trap documentation to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.
This module simply provides a React component that creates and manages a focus trap.
- The focus trap automatically activates when mounted (by default, though this can be changed).
- The focus trap automatically deactivates when unmounted.
- The focus trap can be activated and deactivated, paused and unpaused via props.
9.React Redux Modal Flex
Make easy a modal/popup with Redux
Features
- Responsive
- Easy custom animation effect by Animate.css
Live Demo: https://react-redux-modal-flex.netlify.com/
10.React Medium Image Zoom
This library is a different implementation of Medium.com’s image zoom that allows for a low-res and high-res images to work together for “zooming” effects and works regardless of parent elements that have overflow: hidden or parents with transform properties. Versions >=3.0.0 are compatible with React.js >=16.x; if you need compatibility with react@^0.14.0 || ^15.0.0, please use version 2.x.
11.React Modal
React Modal with bootstrap style Modal dialogs are used to get a response from a user before other features can be assessed from the main page.
Demo: https://trendmicro-frontend.github.io/react-modal
View on Github
12.React Modal Login
Login modal component built with React. Besides a traditional sign in and sign up forms you may use our pre-configured social login buttons. In the current version we offer a support for Facebook and Google.
Since we intend to target the module for developers, we decided to offer bigger customization options. This requires some functions to be created in a parent component. Don’t worry though. We will cover that topic further in this manual.
Demo: https://developers.thebeaverhead.com/react-modal-login
View on Github
13.React Responsive Modal
A simple responsive and accessible react modal compatible with React 16 and ready for React 17.
- Focus trap inside the modal.
- Centered modals.
- Scrolling modals.
- Multiple modals.
- Easily customizable via props.
14. React Confirm Alert
react component confirm dialog
15.React Aria Modal
A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
This module provides a “smart” minimally styled component to wrap you “dumb” fully styled component. It provides the following features, while giving you complete control of the content:
- Focus is trapped within the modal: Tab and Shift+Tab will cycle through the modal’s focusable nodes without returning to the main document beneath.
- Escape will close the modal.
- Scrolling is frozen on the main document beneath the modal.
- When the modal closes, focus returns to the element that was focused just before the modal activated.
- The dialog element has an ARIA role of dialog (or alertdialog).
- The dialog element has an ARIA attribute designating its title, either aria-label or aria-labelledby.
- By default, clicking on the modal’s underlay (outside the dialog element) will close the modal (this can be disabled).
- The modal is appended to the end of document.body instead of its taking up its source-order position within the React component tree.
“Flexible” mostly means that this module provides absolutely minimal inline styles — just enough to get the thing working — but does not provide “complete” modal styling that would get in your way. You get to (have to) style the dialog yourself. (Maybe make a fancy-looking modal module that others could use, which depends on this one behind the scenes?)
Live Demo: http://davidtheclark.github.io/react-aria-modal/demo/
View on Github
16.React Bootstrap Dialog
It’s a Modal-dialog React component based on Modal in react-bootstrap, It’s configurable and easy to use instead of window.alert or window.confirm in your React application.
17.A React modal with animations
A Nice React modal with animations
Live Demo: http://chenjiahan.github.io/rodal/
18.React Images
A simple, responsive Lightbox component for ReactJS to display an array of images.Photos courtesy of Unsplash. Use your keyboard to navigate left right esc — Also, try resizing your browser window.
Live Demo
http://jossmac.github.io/react-images/
#reactjs #javascript
