Stack Overflow
Stack Overflow

Questions tagged [react-modal]

Accessible modal dialog component for React.JS

260 questions
49
votes
13 answers

"Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"

How do I fix this warning in console of a React app using the react-modal package: Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el} I have not been successful at figuring out what el is…
SherylHohman
  • 16,580
  • 17
  • 88
  • 94
18
votes
3 answers

Session timeout warning modal using react

I have a requirement to display timeout warning modal after 13 mins of inactivity and end session after 15 mins if user takes no action. I need to achieve this using reactjs. I checked react-timeout at…
abhi
  • 349
  • 2
  • 8
  • 24
16
votes
1 answer

Best practice for using react-native modals

My react-native app has several situations where different modals can be presented. I am wondering what's the best way to accomplish this. In general I see two different approaches: a) On the root view I always have the Modal-component mounted and…
danielbuechele
  • 3,104
  • 2
  • 18
  • 29
11
votes
1 answer

Animate React Modal

I have a Modal in my web app which I want to slide in when the user clicks "open" button. I am using react-transition-group to achieve this. But I am unable to get the animation working. Not sure what's wrong here? import React from 'react'; import…
darKnight
  • 5,651
  • 13
  • 47
  • 87
10
votes
5 answers

react-modal Dynamic Sizing

Im using react-modal which is pretty great. Is it possible to dynamically size it (perhaps with css media tag). For example, For large screen, the modal only takes up a small potion of the screen (lets say max width 200px; For medium screen, the…
user172902
  • 3,541
  • 9
  • 32
  • 75
9
votes
3 answers

Dismiss modal when navigating to another screen

I have an App with Home Screen, in this screen I'm rendering a Modal which opens on button press, inside the Modal I have a button that is supposed to navigate me to another screen, it's navigating correctly but when I navigate to another screen the…
Judy M.
  • 243
  • 1
  • 4
  • 12
9
votes
4 answers

React Modal Does Not Close In Between Loading Content

I'm using this react modal plugin: https://github.com/reactjs/react-modal and I need to show an array of objects in the modal on page load. When the first item shows user clicks a button so isOpen prop is set to false for Modal. Each item has a prop…
sayayin
  • 971
  • 5
  • 23
  • 36
7
votes
0 answers

react-modal: Don't scroll parent component when Modal is opened ios

This problem is related to #issue 191: Don't scroll parent component when Modal is opened This problem now happens on iOS. Because the parent behind is getting scrolled. The modal sometimes appears unresponsive. I followed the recommendation using…
Kai
  • 71
  • 1
  • 2
7
votes
2 answers

Why does react-modal require the prop contentLabel?

I started getting this warning on my react-modal components: Warning: Failed propType: Required prop contentLabel was not specified in Modal. It doesn't prevent the modal from working correctly, I just see the warning in the dev tools console. I…
evianpring
  • 3,316
  • 1
  • 25
  • 54
6
votes
2 answers

Testing for existence of react-modal using React Testing Library with findByRole

I am trying to test for the existence of my modal using React Testing Library with findByRole. I keep getting an error saying: Unable to find role="dialog" even though I can see clearly see it printed out in the console of the test. Here is my…
dmikester1
  • 1,374
  • 11
  • 55
  • 113
6
votes
1 answer

React modal always take the last element of map function

I am currently creating a React todo application. So basically I have two component TodoList and TodoItem TodoList component will receive an array of objects consisting title as the property and map through this with TodoItem component In my…
yoyomath
  • 63
  • 1
  • 3
6
votes
3 answers

react-modal not closing when clicking the overlay

I'm using react-modal The documentation mentions that the modal should close when you click the overlay by default. Even if I set the shouldCloseOnOverlayClick prop to true, this still does not work. I'm not aware of anything that might prevent…
LightBlue
  • 137
  • 1
  • 2
  • 8
6
votes
3 answers

React Rendering Multiple Modals in Same Component

I'm new to React and to coding in general. I'm trying to render multiple modals in the same component, but they are all being rendered at the same time so that it looks like all the links are rendering the text in the last modal. Here's where the…
Vianka Lemus
  • 109
  • 1
  • 1
  • 7
5
votes
0 answers

useParams of react router dom causes re-rerendering when modal is open and closed

I'm showing a detail of item on DetailPage component. DetailPage renders ItemDetail component, and when I click a button on header in Layout, Modal appears to add or update an item. Modal is provided by react-modal library. // App.jsx function…
Gianna
  • 205
  • 2
  • 12
5
votes
2 answers

How to fetch data only when the modal loads

I have a react component let's say: app.js ( parent component ) that has a child component which renders a react bootstrap modal component. the parent component fetch data from redux using react hook like that: useEffect(() => {…
ninja
  • 167
  • 2
  • 12
1
2 3
…
17 18