react-modal - Accessible modal dialog component for React

  •        12

The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal.If you are doing server-side rendering, you should use this property.

https://github.com/reactjs/react-modal

Dependencies:

exenv : ^1.2.0
prop-types : ^15.5.10
warning : ^3.0.0

Tags
Implementation
License
Platform

   




Related Projects

react-aria-modal - A fully accessible React modal built according WAI-ARIA Authoring Practices

  •    Javascript

A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. Check out the demo.

react-modal2 - :thought_balloon: Simple modal component for React.

  •    Javascript

Simple modal component for React. ReactModal2 tries to be as minimal as possible. This means it requires a little bit of setup, but gives you complete flexibility to do what you want.

react-native-modal - An enhanced, animated and customizable react-native modal

  •    Javascript

An enhanced, animated and customizable react-native modal. The aim of react-native-modal is expanding the original react-native Modal component by adding animations and styles customization options while still providing a plain-simple API.

react-skylight - A react component for modals and dialogs

  •    Javascript

React SkyLight is a simple react component for modals and dialogs. Powerful, lightweight and customizable design. React skylight DEMOS and DOCS.


react-native-root-modal - A pure JavaScript solution for react native`s modal component

  •    Javascript

Import library any where inside your code before AppRegistry.registerComponent is called. Invoked by React element way.

react-native-modal-picker - A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections

  •    Javascript

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections. You can either use this component as an wrapper around your existing component or use it in its default mode. In default mode a customizable button is rendered.

react-native-modalbox - A <Modal/> component for react-native

  •    Javascript

A react native component, easy, fully customizable, implementing the 'swipe down to close' feature. Check index.js in the Example folder.

boron - A collection of dialog animations with React.js

  •    Javascript

A collection of dialog animations with React.js. Then open localhost:9999 in a browser.

react-portal - React component for transportation of modals, lightboxes, loading bars

  •    Javascript

Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its children into it. That's necessary for proper styling (especially positioning). Looking for v3 documentation? Go here.

react-native-lightbox - Images etc in Full Screen Lightbox Popovers for React Native

  •    Javascript

navigator property is optional but recommended on iOS, see next section for Navigator configuration. For android support you must pass a reference to a Navigator since it does not yet have the Modal component and is not on the official todo list. See the Example project for a complete example.

react-native-popover - A <Popover /> component for react-native

  •    Javascript

A <Popover> component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas and contributions are very welcome. However, as an alternative, I recommend you use @brentvatne's react-native-overlay library to wrap <Popover /> and bring it to the front no matter where it sits in the render tree.

react-native-modal-datetime-picker - A React-Native datetime-picker for Android and iOS

  •    Javascript

A declarative cross-platform react-native datetime-picker. This library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal. You will have an unified user experience, you won't have to worry anymore about testing the device platform and you won't have to programmatically call the Android TimePicker/DatePicker APIs.

react-native-overlay - An <Overlay /> component that brings content inside to the front of the view regardless of its current position in the component tree

  •    Objective-C

An <Overlay /> component that brings content inside to the front of the view regardless of its current position in the component tree. This was extracted from react-native-modal because a modal is not the only time that you want to bring something to the front of the screen. Ideally, no. This should probably only be used as a last resort. You can usually accomplish what you need to by just absolute positioning an view at the bottom of your root component.

react-gateway - Render React DOM into a new context (aka "Portal")

  •    Javascript

This can be used to implement various UI components such as modals. See react-modal2. It also works in universal (isomorphic) React applications without any additional setup and in React Native applications when used correctly.

react-medium-image-zoom - Medium.com style image zoom for React

  •    Javascript

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. You can view the demo here.

react-foundation-apps - Foundation Apps components built with React

  •    Javascript

Foundation Apps is a new framework for building web apps. It has awesome new features like flexbox based grid, motion-ui, and several core components for building web apps. But, javascript components of foundation-apps are built with angular. Try React Foundation Apps, if you want to use react.