chenjiahan / rodal Goto Github PK
View Code? Open in Web Editor NEWA React modal with animations.
Home Page: https://chenjiahan.github.io/rodal/
License: MIT License
A React modal with animations.
Home Page: https://chenjiahan.github.io/rodal/
License: MIT License
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}
/>
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.
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.
Can you add an attribute (className) for Rodal?
Now, I can't edit style for it.
Can you please add trap focus functionality, so that tabbing inside a modal will only move focus on elements inside the modal.
Would be nice to be able to close the current modal in focus by pressing ESC
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.
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>
打包生成的lib/rodal.js 中76行依然是Object.assign,而未使用_extends函数
Some case I want to disable animation. How can I disable it?
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.
之前写的项目打开Rodal是居中的,现在不居中了,不知到为啥,用antd 的Modal是居中的
It is useful to provide id for modal element
<Rodal id="preview-dialog" {...props}>{ ...content }</Rodal>
Would you consider such improvement?
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.
I'm looking for a parameter that I can set for that, but I couldnt find one.
Thanks.
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>
ERROR in ./example/src/index.jsx
Module build failed: SyntaxError: E:/zan/www/reactjs/lite/rodal/example/src/inde
x.jsx: Unexpected token (37:16)
35 | };
36 | return (
> 37 | <button key={index} className="btn scale" onClick={this.s
how.bind(this, value)} style={style}>
| ^
38 | {value}
39 | </button>
40 | )
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
);
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
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)
On existing the modal, the slideDown does not seem to work.
Have you considered using react-motion for your animations?
Pressing esc
doesn't close the modal.
http://chenjiahan.github.io/rodal/
Tested on Firefox and Google Chrome
Example link is broken
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
<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'.
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
Can we have types for this?
It would be nice to have for folks with typescript boilerplate.
width
prop on Rodal
. This is deprecated and will not work in the next major version.height
prop on Rodal
. This is deprecated and will not work in the next major version.onClose
prop on Rodal
. This is deprecated and will not work in the next major version.visible
prop on Rodal
. This is deprecated and will not work in the next major version.showMask
prop on Rodal
. This is deprecated and will not work in the next major version.showCloseButton
prop on Rodal
. This is deprecated and will not work in the next major version.animation
prop on Rodal
. This is deprecated and will not work in the next major version.duration
prop on Rodal
. This is deprecated and will not work in the next major version.measure
prop on Rodal
. This is deprecated and will not work in the next major version.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
Im struggling to center the modal with flex. Do you have an example on how to do that?
Is there any way to change the close button icon? I have an SVG I'd like to use in its place.
Actually I using Rodal for it's outstanding animation.
But I want to set body scrolling off when modal is open or visible.
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.
如何使用媒体查询去做响应式?
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.
I want a feature in which i can touch and Hold and move modal in and out.
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:
Open Modal
Set Image
→ Image and cropper properly displayedClose Modal
Open Modal
→ Image and cropper properly displayedClose Modal
Open Modal
→ Image and cropper NOT properly displayedbefore...
after...
Any idea what could I change on the code to fix that issue?
Thanks!
I have issues making rodal responsive on mobile.. please how do i solve this?
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?
It will be a cool feature to implement back-drop filter blur on custom styles. Will be amazing for the Glassmorphism design system.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.