pradel / react-responsive-modal Goto Github PK

View Code? Open in Web Editor NEW

605.0 605.0 95.0 10.71 MB

Simple responsive react modal

Home Page: https://react-responsive-modal.leopradel.com/

License: MIT License

CSS 5.48% TypeScript 69.94% JavaScript 2.58% MDX 22.00%

modal react responsive

react-responsive-modal's Introduction

react-responsive-modal

A simple responsive and accessible react modal.

Focus trap inside the modal.
Centered modals.
Scrolling modals.
Multiple modals.
Accessible modals.
Easily customizable via props.
Typescript support
Small bundle size

Documentation

Getting started
- Installation
- Usage
- Props
- Licence

Installation

With npm: npm install react-responsive-modal --save

Or with yarn: yarn add react-responsive-modal

Usage

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';

const App = () => {
  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

  return (
    <div>
      <button onClick={onOpenModal}>Open modal</button>
      <Modal open={open} onClose={onCloseModal} center>
        <h2>Simple centered modal</h2>
      </Modal>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

Props

Check the documentation: https://react-responsive-modal.leopradel.com/#props.

License

MIT © Léo Pradel

react-responsive-modal's People

Contributors

Stargazers

Watchers

Forkers

crouman florianschmidt1994 russellmorgan bmv437 fecori faisal-w amirzin colorwalf aleemb rahmatcmos jugaltyagi shortcircuit3 duke-yang peterlazzarino basanthi stradap johncookv budaaaa gentom trendingtechnology sktwentysix truongthanh1303 spiderhands thoth-nexlesoft kurdin mdsaleemj valen22br unintellisense mirelescloud evandavid arodrigueze0215 xxsank umair-cd viplove0529 sweetvagabond choznerol jrgranell nuruzzamancse vdrok redtn drumnation diohmaltahorizon lazicdavid mhshifat sadik2141 dlong500 neeraj-singh47 nurbek-ab ajinkyashukla sarehag brentmclark 3andy uttamprasad shreyasrh9 pawndev wmichaelbischoff austrie sungwoojo benbender withviditmhl alexcjames1 majid-amiri ittechsathish eldyvoon nishant8bits djanix trantiendat2009 thayannevls dgo2dance pedropbazzo nhsuk websocket98765 manozkumarj johnoppenheimer rahulart420 vvoral backbonecabal alexkrautmann megawebmaster pc035860 hwacc audree1 huksley jancarlohendriks sunqibuhuake cyntler vaughan189 kalbhairavaa pikaju deepak8717 bertyhell raymelon sayakde98

react-responsive-modal's Issues

Demo is not working for me

Only the "CSS modal" shows up

Environment

Tech	Version
browser	Chrome on Mac

onClick on a div, Modal wont close

Instead of using onClick(this.onOpenModal) with a button, when I use it with a div, the modal opens just fine but wont close. Is there a work-around to use modal with a div. Thanks in advance.

Environment

Tech	Version
react-responsive-modal	1.5.1
React	16.4.2
browser	Google Chrome Version 68.0.3440.106

"Back" button to close the modal.

Is there a way to set the "Back" button to close an open modal. It'll be handy for long scrollable modals, instead of scrolling back to top in order to close it. "Esc" button is handy for desktop users but not for mobile users.

Any help would be appreciated. and Thanks for this amazing modal by the way.

Fixed navbar and open modal.

I use navbar with position: fixed. When open modal, my navbar dont have padding right. Perhaps if the tag html or bopy had a some className, I would be able to use nesting styles to fix the problem. For example (when modal open):

<html class="modal-responsive-open" style="width: calc(100% - 17px); position: fixed; top: -535.2px; overflow: hidden;" >

 .modal-responsive-open .my-fixed-navbar {
  padding-right: 17px;
}

Width of modal

How can i customize the width of the modal, regardless of content?

Overflow hidden is not set to the html tag if the modal is initially set to open

Expected behaviour

Irrespective of when and how the Modal component is being opened it should disable scroll of its topmost parent.

Actual behaviour

If a Modal component is receiving {open: true} as its initial props it will not set overflow: hidden etc. to the top <html> tag like it does when it is opened by a button click.

How to reproduce the behaviour

import React from "react";
import createReactClass from "create-react-class";
import Modal from "react-responsive-modal";

var Component = createReactClass({
  getInitialState: function() {
    return {
      isOpen: true
    };
  },

  _onDialogCloseHandler: function() {
    this.setState({
      isOpen: false
    });
  },

  render: function() {
    const { isOpen } = this.state;

    return (
      <Modal open={isOpen} onClose={this._onDialogCloseHandler}>
        <div>Content</div>
      </Modal>
    );
  }
});

Versions

[email protected]
[email protected]

Example using `container` prop

Thanks for your awesome work on this library! I saw the recent addition of the container prop. Can you please provide an example of how to use it? I'm having difficulties making the Modal render inside the container. Thanks!

Pass HTML in a variable

Hi! Is there a way to pass HTML in a variable?
Example:

this.setState({ htmlContent: '<div>Hello World</div>' });

and then

<Modal open={this.state.open} onClose={this.onCloseModal} little>
   { this.state.htmlContent }
</Modal>

Transition to a new route form when the modal is open.

Hey, so i use react-responsive-modal to show a list where a user can pick up a watermark and also can travel to another route to create a new watermark.

The problem is that when the route transition happens the styles
width: calc(100% - 0px); position: fixed; top: 0px; overflow: hidden;
remain on the html tag.

I was wondering if theres a workaround about this cause i don't see using setTimeout as a solution.

Environment

Tech	Version
react-responsive-modal	2.0.1
React	16.2.0
browser	*

Is IE 11 supported? Demo doesn't render correctly

Environment

Tech	Version
react-responsive-modal	3.3.0
React	15.6.2
browser	IE 11

Hi,

We're currently using your library and are required to support IE 11. We noticed a CSS issue when trying to centre the modal. In addition when using IE11 / Win 7 in Virtual box we reproduced the issue using your demo site.

I started to look into it and found that removing justify-content: center; for the overlay CSS fixed it IE11 - but had to divert to other tasks so hasn't been tested and should only be considered a starting point.

Thanks,

can't see styling effect

I am importing your Modal object using:

import Modal from 'react-responsive-modal';

and using it with:

        <Modal open={this.state.openModal4task} onClose={this.onCloseModal} little={false}  classNames={{ overlay: 'wlcustom-overlay', modal: 'wlcustom-modal' }}>
			
               <MyReactComp/>
			
        </Modal>

my CSS is called and has:

.wlcustom-overlay {
    background: rgba(36, 123, 160, 0.7) !important;
}
.wlcustom-modal {
      background: #b2dbbf !important;
      max-width: 1400px !important;
      width: 100%;
}

yet, I can not see any change....
Am I missing something?
Thx

Using scroll bar to scroll through content on long modal closes the modal

Issue shown here with long modal, try to scroll down to view content. https://codesandbox.io/s/jlzkm0jo3v

Users can't use scrollbar to view long content without inadvertently closing the modal. Browser chrome with

package version: 2.0.0

How do you set width/height

My content is being overlapped by the X close button. It seems like the modal is not making the correct size.

Scroll Issue with big modal

Tech	Version
react-responsive-modal	latest
React	latest
browser	chrome

When using big modal, sometime the scrolling does not work. The scroll bar is present and the modal can be scrolled by dragging the scrollbar. However mouse wheel events gets ignored.
The issue can be reproduced on demo site for this repo.
Position the Big Modal button in some position of the screen and invoke the modal. Sometimes the scrolling using mousewheel gets stuck.

Multiple modals problem

Environment

Tech	Version
react-responsive-modal	3.0.2
React	16.4.0
browser	Chrome 67.0.3396.87

Hi
I'm using react-responsive-modal with own project and i found some bug.
Maybe you can find this bug from "examples page => Multiple modals".

Here is step

open first modal
open second modal
close second modal

then you can see the scrollable page.
So i edited some code
Before
if (openedModals.length === 1)
After
if (openedModals.length === 0)
and it work well.

Can i fix it?

Modal enter animation

Is it possible to change the onEnter animation of the modal?

Is it possible to position the modal to the bottom of the screen?

Environment

Tech	Version
react-responsive-modal	^2.1.0
React	^16.2.0
browser	chrome

Is it possible to position the modal to the bottom of the screen instead of top or center. I know I can use 'little' to center the modal on screen, and default is on the top of screen. But any way I can put modal on the bottom of screen? Thanks

v2

Update all dependencies
Update react-transition-group to v2
Allow custom animations for onEnter and onLeave (#14)
Remove jss to reduce bundle size ?

I have a .custom-modal and a .custom-overlay class but they are not overriding the default styles. How do I make sure they do?

Environment

Tech	Version
react-responsive-modal	3.0.0
React	15.4
browser	Chrome

react-jss dependency error

I am getting error

ERROR in ./~~/react-responsive-modal/~~/react-jss/lib/jss.js
Module not found: Error: Can't resolve 'jss' in 'node_modules\react-responsive-modal\node_modules\react-jss\lib'

I installed both the latest react-responsive-modal and react-jss but still getting the error

Slight bug in closing behaviour

Easy to clarify using steps to reproduce:

Open demo https://react-responsive-modal.leopradel.com/
Open Centered Modal Demo
Start selecting the text but take the mouse cursor to beyond the white content div during the text selection.
Notice that the modal closed, when it should have remained open because you were just intending to select text.

Basically, during any drag operation, if the user's cursor goes beyond the content div, the modal closes. Can get in the way if the modal contains draggable layers and such where dragging is the norm (my use case).

Modal bugs on multiple browsers

Environment

Tech	Version
react-responsive-modal	2.0.0
React	16.2.0
browser	Chrome (64.0.3282.186) / Microsoft Edge (41.16299.248.0)

Hey there.
We've been using your modals for some time now, created a few for our product, but have been running into a few UI glitches. I'll ennumerate below, please tell me what you think.

First of all, on our code, we create specific components for each modal we use, at least for the time being. That means that, in a main component X, instead of importing your modal solution, we import our modal component, which in turn renders your modal solution with our specified fields.

With that said:

This is our main screen for one of the menu items:

When we click 'Create Task', a modal appears, but whenever it appears, a small space on the right side gets reserved for the modal scroll, which is never used:

This gets corrected whenever we close the modal, but it looks obviously bad to have it like this. Do you have any idea as to why this happens and, if so, any solution?
If you check the second image I attached here, you'll see that the navbar on the left seems to be in front of the modal, not behind it. Is there any way to put it behind the modal too? I'm not yet aware on how the navbar was implemented, but I can look into it if you need some more guidance from our side.
On our splash screen, we're showing a number of open tasks, onto which one can go and check its information. This, of course, enables a scroll on our browser:

(please don't mind the navbar, we know it should be dragged down to follow the viewport...)
However, if we scroll down and try to open a modal after scrolling, i.e. on any of the tasks shown above, this happens:

Not only does the scroll reserved space appear, but the whole screen doesn't follow the modal appearance. This gets corrected as soon as we close the modal, and we return to the place where we were.

Bear in mind that these issues appear on both Chrome and Edge, the browsers we have installed at the moment.
I hope I wasn't too confusing about these issues. Feel free to request more information if you need.

Thanks in advance,
Gil

Create custom close button inside the modal

How to create a custom close button inside a modal.

Environment

Tech	Version
react-responsive-modal	3.3.0
React	16.4.2
browser	Chrome Version 69.0.3497.92

Support for Smooth Resize

Does this modal support using css transitions to animate changes in the size of the modal when the modal content changes?

Click on scroll bar still closes modal if page content is short

I'm still seeing this issue (#43) on 2.0.1, with Chrome (65.0.3325.181 x64) on Windows (7).
My modal content is tall, but my main page doesn't scroll. Clicking on the scroll bar still closes the window in Peter's codesandbox in the first comment, even after switching it to r-r-m 2.0.1.

I can also reproduce this on https://react-responsive-modal.leopradel.com/ after removing everything below the examples so the main page doesn't scroll.

https://react-responsive-modal.leopradel.com/
In Chrome dev tools, run:
$('.main-content').removeChild($('.main-content > div:not(.examples)')); $('.main-content').removeChild($('.main-content > footer'))
If necessary, resize your window so there are no scroll bars.
Click the Open button for the "Big modal" example.
Click on the scroll bar that just appeared and try to scroll.

Expected: page scrolls with modal in it. (This works when scrolling with a mouse wheel.)
Actual: modal closes.

It looks like when the main page content doesn't scroll, document.documentElement.offsetWidth matches window.innerWidth as the full width of the window. When the main page content has a scrollbar, these widths differ and Peter's patch works to detect clicks in the vertical scrollbar.

In my case, where the page doesn't scroll but the modal causes a scrollbar to appear, the .scrollWidth of the overlay is less than window.innerWidth. I think this makes sense, because the modal is nested inside the overlay, so if the modal's content is tall, the overlay gets a scroll bar.

I've only tested my pull request #75 in Chrome 65 and IE 11, but it looks good on both.

onClose method is called on "Esc" when it is closed

Hi. First of all thank you for such a great modal!

Our team is using it and we faced an issue today. There is a problem with onClose method. When you press "Esc" is called even if the modal is in "hidden" state ( open = false ). Here is an example.

Here is a pull request to fix it.

Environment

Tech	Version
react-responsive-modal	2.0.1
React	16.1.1
browser	*

[feat request] Option to keep modal dom elements on page even if it is closed

Could be done by just defaulting opacity to 0 and z-index to -9999999.

The reason it'd be handy is for things like FirebaseUI (needs a dom element to watch).

Enable click on overlay to close on iOS

Summary:
On iOS 11, with onClickOverlay enabled, when the user taps on an overlay, the overlay doesn't close.

Seems similar to an issue another react modal library has. The relevant links are below.

reactjs/react-modal#301
reactjs/react-modal#304

Tabbing inside modal

Is it considered to add support for Tab-ing and Shift+Tab-ing between modal controls (close button, other buttons) without focus escaping from the modal?

Exception onClick on modal

In this line

react-responsive-modal/src/modal.js

Line 63 in f390bf2

const className = e.target.className.split(' ');

I've got an exception.
Its' happened in the case when I'm clicking on the svg element. classList it's an object, not string. it include two properties

use of styles to change dimensions

I need to ask how can it be done to change the width of the modal. I tried styles, className but no good results so far. Also, can you provide examples on how to use these properties?
Thx

how to can style this thing

so complicated to style it up

Add possibility to customize the container

It could be named node as well in favour of pradel/react-minimalist-portal#13

Add React 16 support

Depends on react-transition-group React 16 support

Best modal plugin ive seen for react!

Keep up the good work!

Modal inception - overflow hidden

Hi,

I am using your awesome library for some time with no problems. Good job!

However, I found out, that opening modal in a modal is not behaving properly.
If you open a modal in a modal and the close it, it will reset the "overflow: hidden" style on body which is not proper behaviour as it should keep the hidden property there until you close the fist modal.

Does it make sense?

Thanks,
David

Webpack Error

Environment

Tech	Version
react-responsive-modal
React	16
browser	Chrome

Broken style on minify

On React version 15.6.1 when building with Uglify enabled, the resulting bundle lacks the correct CSS Classes, and styling is broken.

Can you provide an already and properly minified version of the lib?

Remove default styling from modal

I'm trying to override the padding using classes. Currently, this isn't working :/

Feature request: callback after close event completes

Handy for things like removing the component from the DOM after the close animation completes & not have to do some hack workaround like setTimeout().

Provide typescript typings

Question: Moving "button" After Modal Open

When I click on my button for my Modal, the button (which is an image), moves to the top of the page.

Glad to provide additional information if needed.

Appreciate the assist!

Environment

Tech	Version
react-responsive-modal	3.0.3
React	16.4.1
browser	Chome (latest)

MyModal.js

import React from 'react';
import Modal from 'react-responsive-modal';
import MyLogo from '../LogoSelector';

export default class CenteredModal extends React.Component {
  state = {
    open: false,
  };

  onOpenModal = () => {
    this.setState({ 
      open: true 
    });
  };

  onCloseModal = () => {
    this.setState({ 
      open: false 
    });
  };

  render() {
    const { open } = this.state;
    
    return (
      <div className="MyModal">
        <MyLogo on_click={this.onOpenModal} myStyle="CenterLogo" color="white" />
        
        <Modal 
          open={open} 
          onClose={this.onCloseModal} 
          center
        >
          <iframe src="https://www.google.com" />
        </Modal>
      </div>
    );
  }
}

Override css of modal

Hello,
how can i ovveride the css of the modal window?

Environment

Tech	Version
react-responsive-modal
React
browser

Clarity on center prop

This problem has been noted at least once (#163), if not twice (#47). I am inferring from the question asked in that first issue and from the README (center is for "when you don't have a lot of content"), that center does not work properly when the height of the modal exceeds the view height, and this is either a known limitation or by design.

It would be helpful to know if there are plans to "fix" this, and if not I think an update to the README that's more explicit about the potential drawbacks to center as a prop would be helpful.

header is cropped

When modal is centered and window height less then modal height, you can't scroll to the top, header is cropped

TypeError: Cannot call a class as a function

Hi!

I was using the react-responsive-modal in my project earlier and it worked. In the past hour I've been getting a "TypeError: Cannot call a class as a function". In my console I got this warning, "index.js:2177 Warning: The <Jss(Modal) /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change Jss(Modal) to extend React.Component instead."

I installed 'react-responsive-modal' and it's in my package.json.

When I remove the Modal element from my code, I no longer have any issues. Any thoughts on how to fix?

My code is as follows:

`import React from 'react';
import CommentForm from './CommentForm';
import CommentList from './CommentList';
import Modal from 'react-responsive-modal';
import '../../App.css'

class ImageItem extends React.Component{

constructor(){
super()
this.state = {
open: false
}
}

openModal = () => {
this.setState({open: true})
}

closeModal = () => {
this.setState({open: false})
}

render(){
let link
if (this.props.image.cover) {
link = https://i.imgur.com/${this.props.image.cover}.jpg
} else if (this.props.image.link) {
link = this.props.image.link
}
return(

    <div className="column">
      <div className="Image-container">
        <img aligned="center" src={link} alt={this.props.image} onClick={this.openModal}/>
      </div>
      <Modal open={this.state.open} onClose={this.closeModal}>
        <p>Image Title: {this.props.image.title} </p>
        <div className="Modal-container">
          <img aligned="center" src={link} alt={this.props.image} />
          <CommentList comments={this.props.comments}/>
          <CommentForm image={this.props.image.id}/>
        </div>
      </Modal>
    </div>

  )

}
}

export default ImageItem
`

Modal does not display correctly, cuts off top part

Summary:

When I create a modal with too much text or images, the modal does not give the correct scroll features and will cut the top part of the modal

Steps to reproduce:

create a modal
a too many lines of text
3.modal cannot display all text correctly and cuts off top part

React Responsive Modal Will not work

Hello, I am currently using react-responsive-modal and I have used it many times in my previous projects, all with the same exact setup with webpack etc, but for some reason, I keep getting this error.

raven.js:80 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `Modal`.
    in Modal (created by Jss(Modal))
    in Jss(Modal) (created by UnlockModal)
    in UnlockModal (created by Payment)
    in div (created by Payment)
    in Payment (created by Connect(Payment))
    in Connect(Payment) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in Provider (created by App)
    in App
a.(anonymous function) @ raven.js:80
printWarning @ warning.js?6327:33
warning @ warning.js?6327:57
createElement @ react.development.js?99ee:1275
render @ modal.js?b977:169
finishClassComponent @ react-dom.development.js?cada:10249
updateClassComponent @ react-dom.development.js?cada:10226
beginWork @ react-dom.development.js?cada:10605
performUnitOfWork @ react-dom.development.js?cada:12573
workLoop @ react-dom.development.js?cada:12682
callCallback @ react-dom.development.js?cada:1299
d @ raven.js:372
invokeGuardedCallbackDev @ react-dom.development.js?cada:1338
invokeGuardedCallback @ react-dom.development.js?cada:1195
performWork @ react-dom.development.js?cada:12800
scheduleUpdateImpl @ react-dom.development.js?cada:13185
scheduleUpdate @ react-dom.development.js?cada:13124
scheduleTopLevelUpdate @ react-dom.development.js?cada:13395
updateContainer @ react-dom.development.js?cada:13425
(anonymous) @ react-dom.development.js?cada:17105
unbatchedUpdates @ react-dom.development.js?cada:13256
renderSubtreeIntoContainer @ react-dom.development.js?cada:17104
render @ react-dom.development.js?cada:17129
(anonymous) @ index.js?449f:51
(anonymous) @ index.js:6935
__webpack_require__ @ index.js:20
(anonymous) @ index.js:63
(anonymous) @ index.js:66
raven.js:376 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `Modal`.
    at invariant (invariant.js?7313:42)
    at createFiberFromElementType (react-dom.development.js?cada:8185)
    at createFiberFromElement (react-dom.development.js?cada:8130)
    at reconcileSingleElement (react-dom.development.js?cada:9378)
    at reconcileChildFibers (react-dom.development.js?cada:9477)
    at updatePortalComponent (react-dom.development.js?cada:10505)
    at beginWork (react-dom.development.js?cada:10623)
    at performUnitOfWork (react-dom.development.js?cada:12573)
    at workLoop (react-dom.development.js?cada:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:1299)
    at HTMLUnknownElement.d (raven.js:372)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:1338)
    at invokeGuardedCallback (react-dom.development.js?cada:1195)
    at performWork (react-dom.development.js?cada:12800)
    at scheduleUpdateImpl (react-dom.development.js?cada:13185)
    at scheduleUpdate (react-dom.development.js?cada:13124)
    at scheduleTopLevelUpdate (react-dom.development.js?cada:13395)
    at Object.updateContainer (react-dom.development.js?cada:13425)
    at eval (react-dom.development.js?cada:17105)
    at Object.unbatchedUpdates (react-dom.development.js?cada:13256)
    at renderSubtreeIntoContainer (react-dom.development.js?cada:17104)
    at render (react-dom.development.js?cada:17129)
    at eval (index.js?449f:51)
    at Object.<anonymous> (index.js:6935)
    at __webpack_require__ (index.js:20)
    at index.js:63
    at index.js:66

Does you know what the problem may be? I am positive it is not an issue with exporting and importing components correctly.

Using the ESC key with two modals open, closes them both.

Environment

Tech	Version
react-responsive-modal	2.0.0
React	16.2.0
browser	Chrome

Hello,

Right now, when you open two modals (with the closeOnEsc prop set to `true), hitting the escape key closes them both.

Here's a sandbox to see it happen

Any recommendations on how to remedy this? Is this something that should go in the library?

Thanks!

Broken build on node v4

Hi, thanks for great library.

However, latest commits broke build on node v4.x.x
Could you please also include this build into the travis?

Error:

npm ERR! node v4.5.0
npm ERR! npm  v2.15.9

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants jss@^5.2.0
npm ERR! peerinvalid Peer [email protected] wants jss@>=3.0.0 < 4.0.0
npm ERR! peerinvalid Peer [email protected] wants jss@^5.2.0
npm ERR! peerinvalid Peer [email protected] wants jss@^5.2.0

Thanks!

David

pradel / react-responsive-modal Goto Github PK

react-responsive-modal's Introduction

react-responsive-modal

Documentation

Installation

Usage

Props

License

react-responsive-modal's People

Contributors

Stargazers

Watchers

Forkers

react-responsive-modal's Issues

Environment

Environment

Expected behaviour

Actual behaviour

How to reproduce the behaviour

Versions

Environment

Environment

Environment

Environment

Environment

Environment

Environment

Environment

Environment

Environment

MyModal.js

Environment

Summary:

Steps to reproduce:

Environment

Recommend Projects

Recommend Topics

Recommend Org