Accessible modal dialog component for React.JS
Questions tagged [react-modal]
260 questions
3
votes
1 answer
Can't import typescript react-modal
I'm starting from an open source project here:
https://github.com/vega/voyager
And got it working and I want to add a modal.
So I ran:
yarn add react-modal
yarn add @types/react-modal
Then I added added:
import {ReactModal} from…
Bren
- 3,516
- 11
- 41
- 73
2
votes
1 answer
React popover(modal) closes automatically after I click the open button (event listener)
Goal:
I want to implement a popover(modal) in React.
When the user click a button, then the popover is open.
Close the popover when the user clicks outside of the popover.
Logic:
conditionally render the popover component using state.
In popover…
JXUHO
- 23
- 4
2
votes
2 answers
react-modal: How to get modal to auto-expand when react-datepicker is clicked? (code attached)
How to get modal to auto-expand when react-datepicker is clicked? Modal fits initially, but then when you click on the date field and the react-datepicker shows the calendar, the react-modal dialog does not auto-expand?
Before:
Ater clicking…
Greg
- 34,042
- 79
- 253
- 454
2
votes
1 answer
Any way to open a modal dialog without explicitly storing state?
I have been using react-modal recently, and the pattern to show a modal is something like:
const [modalIsOpen, setModalIsOpen] = useState(false);
return (
some content
Rollie
- 4,391
- 3
- 33
- 55
2
votes
2 answers
React: Trigger a function from React Modal component
UPDATE: Code Sandbox link - https://codesandbox.io/s/goofy-dubinsky-4ui5v?file=/src/SearchRow.js
There is a use-case where we have a search results table and there are some rows that have a button to audit that row data for business purposes. Now…
Gaurav Gupta
- 129
- 1
- 13
2
votes
1 answer
React Modal Updater doesn't refresh page after setState()
I have been advised to shallow copy an object, since copying the state object using only the = sign would "point" to the old state.
Now, I've got this: there's a list on my screen, and each item on it is an element from a state array. Each item has…
João Casarin
- 674
- 2
- 9
- 27
2
votes
0 answers
Prevent Body Scrolling with React Modal (iOS)
There a lot of threads online about how to lock the body especially on iOS, but I haven't found a good answer.
body {
overflow: hidden;
}
Doesn't work on iOS.
My question is: how can I prevent Body Scrolling on iOS with react-modal?
Note: I found…
Alfrex92
- 6,278
- 9
- 31
- 51
2
votes
2 answers
I am getting this error: “react-modal: App element is not defined”
I am using React-modal in an application I am building. It works fine, but I am getting this error:
As I found out on this thread https://github.com/reactjs/react-modal/issues/133 it seems to be happening becase "react-modal was trying to set the…
Berg_Durden
- 1,531
- 4
- 24
- 46
2
votes
3 answers
How can I place close button outside of modal window in react-modal?
I've imported Modal from react-modal (React Player is just for emdebbing video) and my code looks this way now:
jakhando
- 113
- 1
- 9
2
votes
3 answers
How to display modal without backdrop effect with react-modal?
I am using react-modal for both modals and notifications.
I would like to disable the overlay/backdrop effect on the modal. I went through the API and I can't see anything about it.
Here is a basic modal I set…
utopia
- 322
- 1
- 4
- 22
2
votes
2 answers
How To Set React Modal border radius
How do i change the border radius of react-modal, i have given className Modal to the component and have defined the styles for the class but that does not seem to have any effect on the modal
Bilal Hussain
- 572
- 6
- 14
2
votes
3 answers
I have my modal component in a different file and I'm trying to open it from another component
BuySectionItem.js
class BuySectionItem extends React.PureComponent {
constructor( props ) {
super( props );
this.state = {
modalIsOpen: false,
}
…
Kavya nagendra
- 83
- 1
- 9
2
votes
1 answer
react modal image doesn't show large size image when being clicked
I have code below to display images in Image.Group with size prop to be set to "small". In side the Image.Group, I used ModalImage which is imported from react-modal-image. It is supposed to display large size photo when the image is clicked. But…
damingzi
- 676
- 10
- 28
2
votes
1 answer
How To Make Popup Modal Appear When Clicking a Link?
I am trying to create a Login Modal Form for an application. However, I want the popup to appear when I click a link versus a button. In other words, when I click the login link in my navbar, I don't want to be redirected to another page entirely. I…
GalaXee95
- 71
- 1
- 2
- 10
2
votes
1 answer
Close ReactModal from ReactComponent
I have a React.Component inside a ReactModal.
class Course extends React.Component {
constructor(props) {
super(props)
this.state = {
isModalOpen: false,
}
}
handleModalOpen = event => {
this.setState({ isModalOpen: true…
Dejell
- 13,947
- 40
- 146
- 229