Accessible modal dialog component for React.JS
Questions tagged [react-modal]
260 questions
1
vote
2 answers
Native Base and Modal not working in React Native
Is there any conflict with native base and react-native-modal? I can't get my modal to display the content. I was wondering if it is because the Container tag of native base.
Code: https://snack.expo.io/rJbAI_Cxr
myTest532 myTest532
- 2,091
- 3
- 35
- 78
1
vote
2 answers
React Modal and Media-queries
I'm hoping someone can show me how to make this react modal mobile responsive. It isn't using bootstrap.
Ally Fuller
- 27
- 2
- 2
- 9
1
vote
1 answer
Sending focus to dropdown once the modal is closed in React
We have a requirement, where focus needs to be set on dropdown (not the child elements of dropdown) once the Modal is closed.
We are using ReactModal component, it has prop called 'shouldReturnFocusAfterClose'(when set to true) which will set focus…
Mohan
- 11
- 3
1
vote
0 answers
Embed another navigator inside a modal in react native
I have create a modal using react-native-modal which display a component A('Cart' in my case) (having multiple child components and so on.)
This modal opens upto to half the screen while the other contents of the app is visible behind the overlay in…
Romit Kumar
- 2,442
- 6
- 21
- 34
1
vote
0 answers
Unable to access react modal component jsx when exported with Redux
I have a test for a React component which is being exported with connect. I was able to have my tests pass, but my Snapsnot is not what I expect it to be. I opened a GH issue with the enzyme team as well Note I took out some of the methods, since…
eagercoder
- 526
- 1
- 10
- 23
1
vote
1 answer
How can i set the content of reactstrap modal-header in center?
I'm using the reactstrap Modal,There is ModalHeader where I am showing my content.But I am facing the issue while i'm trying to put that content in center of header.
After doing inspect elements I found inside ModalHeader there is
tag, inside…
Zaif Warm
- 475
- 3
- 8
1
vote
2 answers
Connect function outside the state in React
I have an application with many items collection, and in admin area, the admin user can delete or modify items (like a traditional e-commerce website back office). In logic, for modify an item, user click on "modify item" button, and a modal open.…
Millos
- 43
- 1
- 2
- 5
1
vote
1 answer
react-modal: How to close one modal and open a new one at the same time?
I want to implement an authentication modal like Airbnb/Medium. When I click "Sign Up" in the Login Modal, The Login Modal closes and the Register Modal opens. I read react-modal docs and didn't see a way to do so. Could anyone please assist me…
H. Pham
- 13
- 2
- 3
1
vote
1 answer
Getting error while closing the react-modal
here when a user click on a picture of the UserProfile component, a modal opens with details about the picture. But when a user closes the modal, an error is generated.
Error:
Cannot read property 'uid' of undefined
at t.value…
Sujoy
- 97
- 1
- 11
1
vote
1 answer
React Modal in reactjs
I have used react-modal for modal dialog,
and in my reactjs render(), i have the following modal
return(
1
vote
2 answers
Close modal after login React
I have to case where I use my Login.js component in modals: In the first one, the modal should not close after signin; in the second one, it has to close.
I'm trying to figure out how to handle the second case: I tried this but it does not work: I…
Uj Corb
- 1,959
- 4
- 29
- 56
1
vote
2 answers
Change react-modal data dynamically
I have a Parent component, App.js and a Child component, MealModal.js. When a user click on a specific meal card, it raises a modal that should display further information about the meal.
Hence I try to find a way to dynamically change the modals's…
Uj Corb
- 1,959
- 4
- 29
- 56
1
vote
1 answer
can't render react-modal as reusable component
I have an app with a list of meal, and clicking on a meal should make a modal appear on the screen with further information about the meal.
So I am trying to code a basic modal as a reusable component using the react-modal package.
However when I…
Uj Corb
- 1,959
- 4
- 29
- 56
1
vote
1 answer
Position react-modal relative to an element in the background
I have an input box in my main App element (id= "inputBox") and a react-modal that pops up when some input is given to this input box(via onChange event).
I want to position the react-modal just below this input box when it pops open but am being…
user8586858
1
vote
2 answers
React Modal not working in Header Component
I have a Login component in my header(bootstrap) which needs to open a Modal when I click. I am using the Modal from react-modal (npm package).
Even though I am not getting an error the popup won't open.
this.state={
…
Erick
- 1,098
- 10
- 21