This is a modal that support resizalbe and draggable function
npm install react-modal-resizable-draggableAccessible modal dialog component for React.JS
* Installation
* Usage
* Styles
* Examples
* Testing
* Demos
To install, you can use npm or yarn:
$ npm install react-modal-resizable-draggable
$ yarn add react-modal-resizable-draggable
css
.flexible-modal {
position: absolute;
z-index: 1;
border: 1px solid #ccc;
background: white;
}
.flexible-modal-mask {
position: fixed;
height: 100%;
background: rgba(55, 55, 55, 0.6);
top:0;
left:0;
right:0;
bottom:0;
}
.flexible-modal-resizer {
position:absolute;
right:0;
bottom:0;
cursor:se-resize;
margin:5px;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
}
.flexible-modal-drag-area{
background: rgba(22, 22, 333, 0.2);
height: 50px;
position:absolute;
right:0;
top:0;
cursor:move;
}
`The Modal object has one required prop:
-
isOpen to render its children.Optional prop:
-
minWidth The minimum width of the modal(default 0).
- minHeight The minimum height of the modal(default 0).
- initWidth The initial width of the modal(default 800).
- initHeight The initial width of the modal(default 400).
- top The position of the modal.
- left The position of the modal.
- onRequestClose to close the modal.
- disableMove to disable the drag function(default false).
- disableResize to disable the resize function(default false).
- disableVerticalResize to disable the vertical resize function(default false).
- disableHorizontalResize to disable the horizontal resize function(default false).
- disableVerticalMove to disable the vertical drop function(default false).
- disableHorizontalMove to disable the horizontal drop function(default false).
- disableKeystroke to disable keystroke listener(default false).
- onFocus called when the modal is clicked.
- className The additional class to the modal.
Examples
Inside an app:
`jsx
import React, {Component} from 'react';
import './App.css';
import ReactModal from 'react-modal-resizable-draggable';class App extends Component {
constructor() {
super();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
closeModal() {
this.setState({modalIsOpen: false});
}
render() {
return (
initWidth={800}
initHeight={400}
onFocus={() => console.log("Modal is clicked")}
className={"my-modal-custom-class"}
onRequestClose={this.closeModal}
isOpen={this.state.modalIsOpen}>
My Modal
This is the modal's body.
);
}
}export default App;
``