It is useful to provide id for modal element

<Rodal id="preview-dialog" {...props}>{ ...content }</Rodal>

Would you consider such improvement?

Hi, is it possible to make screen under popup inactive when popup is active?

Hello, thanks for make this component available for everyone! great job.
my case, maybe I'm doing something wrong but the boolean configuration is not working for me for the properties closeOnEsc, showCloseButton, showMask

<Rodal
  width='100vw'
  height='100vh'
  visible={this.state.isModalVisible}
  onClose={this._hideModal.bind(this)}
  animation="slideDown"
  showMask="false"
  closeOnEsc="false"
  showCloseButton="false"
  customStyles={
    {
      backgroundColor: this.state.projectOpen.bg_color,
      color: this.state.projectOpen.txt_color,
      overflow: 'scroll'            
    }
  }
>
  
  <div>
    <h1>{this.state.projectOpen.title}</h1>
    {/* my content....... /*}
    </div>
</Rodal>

• Rodal version: 1.3.2
• React version: 15.1.0

Warnings

• You are manually calling a React.PropTypes validation function for the width prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the height prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the onClose prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the visible prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the showMask prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the showCloseButton prop on Rodal. This is deprecated and will not work in the next major version.
  *You are manually calling a React.PropTypes validation function for the animation prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the duration prop on Rodal. This is deprecated and will not work in the next major version.
• You are manually calling a React.PropTypes validation function for the measure prop on Rodal. This is deprecated and will not work in the next major version.

<Rodal visible={this.state.isModalVisible} width={400} height={400} className="videoCard" onClose={this.closeNew} closeOnEsc={true}>
          <div>Content</div>
          <button onClick={this.closeNew}>close</button>
        </Rodal>

closeNew function

closeNew() {
    this.setState({isModalVisible: false});
  }

The modal cannot be closed when press button, with no error throwed. By the way, the mask is not shown (with default 'true'), and I cannot close the modal with 'ESC'.

Hi,

I'm trying to install this package but I am having this peerDepencies error. I can't even install the css-loader. It's giving me the same problem.
Any idea how I can install this package?

Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "rodal" "--save-dev"
npm ERR! node v0.12.7
npm ERR! npm v2.14.3
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.2
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 15.x.x
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.1
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14 || >=15.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.2

Cheers,
nikki

Universal apps rendering their initial render on the server cannot use this library since it has a document and window dependency.
Please add to your script logic the following test to check if this is running in fact on the client...

var canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);

With keyboard navigation i.e. with tab button, browser control is currently skipping the close button.

Its good that button is rendered after the children so we can just add tabindex=0 to enable accessibility for the close button.
Additionally to handle the event additional prop can be added to let consumer decide whether they want to support accessibility or not.

Provide an option that disabled closing of the Rodal when the mask is clicked. Proposed name is closeMaskOnClick with default to be true.

This feature request is similar to the backdrop='static' option of bootstrap modal.

Meanwhile this Stackoverflow answer has a work around.

POC: https://stackblitz.com/edit/react-nested-rodal-close-on-esc?file=Test.js

Can you please add trap focus functionality, so that tabbing inside a modal will only move focus on elements inside the modal.

I have an issue about responsive with Rodal.

Because Rodal add width, height attributes as inline styles, it's difficult for responsive.

Can you add an attribute to disable width, height?

Thanks.

Example link is broken

It will be a cool feature to implement back-drop filter blur on custom styles. Will be amazing for the Glassmorphism design system.

Hi, first of all, awesome plugin.

I think for NPM packages, is best not to link to the /dist folder. That should be used for bower modules. As that dist package contains all the dependencies which gets your plugin bloated, you should point the package.json to the /src index instead, since most people who is going to use npm package should have react/react dom installed for dependencies already.

node_modules/rodal/lib/rodal.css:2
.rodal, .rodal-mask {
^

SyntaxError: Unexpected token .
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (/Users/vimniky/Desktop/start-kit2/node_modules/rodal/lib/rodal.js:15:1)
at Module._compile (module.js:413:34)

Some case I want to disable animation. How can I disable it?

On this StackBlitz: https://stackblitz.com/edit/react-lqksbb?file=src%2FApp.js

I have the following code:

import React, { useRef, useState } from 'react';
import Rodal from 'rodal';
import 'rodal/lib/rodal.css';
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";
import './style.css';

export default function App() {
  
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [image, setImage] = useState(null);

  const openModal = () => {
    setIsModalVisible(true);
  };

  const closeModal = () => {
    setIsModalVisible(false);
  };

  const cropperRef = useRef(null);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <button onClick={openModal}>Open Modal</button>
      <Rodal
        visible={isModalVisible}
        onClose={closeModal}
        closeOnEsc
        customStyles={{
          width: '100%',
          height: '100%',
          maxWidth: '620px',
          maxHeight: '600px',
        }}
        customMaskStyles={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
      >
        <br />
        <button onClick={() => setImage('https://i.ibb.co/jZBdmCk/image.png')}>Set Image</button>{' '}
        <button onClick={() => closeModal()}>Close Modal</button>
        <br />
        <br />
        <Cropper
          src={image}
          style={{ height: 400, width: '100%', backgroundColor: '#d1d1d1' }}
          aspectRatio={1}
          viewMode={1}
          minCropBoxHeight={10}
          minCropBoxWidth={10}
          background={false}
          responsive={true}
          autoCropArea={1}
          guides={true}
          ref={cropperRef}
        />
      </Rodal>      
    </div>
  );
}

My problem is: When the viewport changes the height the react-cropper gets misconfigured.

Reproduce Steps:

1. Go to: https://stackblitz.com/edit/react-lqksbb?file=src%2FApp.js
2. Open StackBlitz built-in Console (small height is enough)
3. Click button: Open Modal
4. Click button: Set Image → Image and cropper properly displayed
5. Click button: Close Modal
6. Click button: Open Modal → Image and cropper properly displayed
7. Click button: Close Modal
8. Resize (height) just a bit the StackBlitz built-in Console
9. Click button: Open Modal → Image and cropper NOT properly displayed

before...

after...

Any idea what could I change on the code to fix that issue?

Thanks!

New to react so there may be an easy workaround

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= ^16.0.0" from [email protected]
npm ERR! node_modules/rodal
npm ERR!   rodal@"*" from the root project

I'm having this warning

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

(client) rodal-dialog rodal-fade-leave" data-reac
(server) rodal-dialog rodal-flip-leave" data-reac

Hello

For now, the content of the modal is rendered in the DOM even when it is hidden. To get around this, I have to add an extra condition, but it breaks the closing animation (closes instantly).

{isVisible && <SomeModal
  visible={isVisible}
  hide={this.hideModal}
/>}

How about adding the unmountOnExit option, as in react-transition-group?

<SomeModal
  visible={isVisible}
  hide={this.hideModal}
  unmountOnExit={true}
/>

Can we have types for this?
It would be nice to have for folks with typescript boilerplate.

Dear @chenjiahan,
Is there any way to implement a close property that setState visible false on router change?
Something like:
onRouterChange={this.hide.bind(this)}
Thanks a lot.

On existing the modal, the slideDown does not seem to work.

I'm looking for a parameter that I can set for that, but I couldnt find one.

Thanks.

Have you considered using react-motion for your animations?

I want the modal will not close while clicked on the backdrop or on pressing the esc button, I have seen some function like data-backdrop="static" data-keyboard="false" but I tried them in the Rodal but in vain, could you guys please help me out with a feasible solution?

Actually I using Rodal for it's outstanding animation.

But I want to set body scrolling off when modal is open or visible.

Can you add an attribute (className) for Rodal?

Now, I can't edit style for it.

之前写的项目打开Rodal是居中的，现在不居中了，不知到为啥，用antd 的Modal是居中的

Im struggling to center the modal with flex. Do you have an example on how to do that?

We should pass event on onClose function when user does closeOnEsc with onKeyUpEvent. I came across a case where I have modal inside modal with closeOnEsc property. The closing of inner modal closes outer modal as well. If event is available then one can stop the propagation of event to close only inner modal.

Is there any way to change the close button icon? I have an SVG I'd like to use in its place.

The demo website is on sale!

this is my case:
i write a prototype tool,and i need a little modal to provide to user to fill some info,
but when i inspect the modal element,i find it's height has been limited to 240px,
so i wonder if there is any interface or props to use for it

打包生成的lib/rodal.js 中76行依然是Object.assign，而未使用_extends函数

Pressing esc doesn't close the modal.
http://chenjiahan.github.io/rodal/

Tested on Firefox and Google Chrome

It is not possible to install the package because peerDependencies does not support version ^18

package.json:

"peerDependencies": {
"react": ">= ^17.0.0"
},

error:

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! dev react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= ^17.0.0" from [email protected]
npm ERR! node_modules/rodal
npm ERR! rodal@"^2.0.0" from the root project

The rodal doesn't no matter what I do. Even if I do click on the close button. A portion of my code is below. I've checked that when I click the close button, the state changes from true to false but the rodal doesn't close. How do I make it close?

Please help. Thanks!

<div className="col-xs-12 table-fonts table-row-hover" onClick={this.eventPage.bind(this,event._id)} style={{top: '50px'}} key={event._id}>
                              <Rodal visible={this.state.visible} animation="flip" onClose={this.hide.bind(this)}>
                                  <ShowEvent />
                              </Rodal>
</div>

I have issues making rodal responsive on mobile.. please how do i solve this?

I want a feature in which i can touch and Hold and move modal in and out.

如何使用媒体查询去做响应式？

When Rodal is active, and you try to focus on any input element using autoFocus or .focus() event, it is focusing. But after a second or more, it changes focus from the input element to Rodal.

Would be nice to be able to close the current modal in focus by pressing ESC