react-modal-touch
Accessible modal dialog component for React. See the demo
Touch feature support
- touch drag to move the modal
- touch drag on the cursor in bottom to resize
Keyboard feature support
- arrowLeft: move left 20px
- arrowRight: move right 20px
- arrowUp: move up 20px
- arrowDown: move down 20px
- ctrl + arrowLeft: decrease width 20px
- ctrl + arrowRight: increase width 20px
- ctrl + arrowUp: increase height 20px
- ctrl + arrowDown: decrease height 20px
Table of Contents
Installation
To install, you can use npm or yarn:
$ npm install react-modal-touch
$ yarn add react-modal-touch
Usage
The Modal object has two required prop:
-
isOpen
to render its children. -
onRequestClose
to close the modal.
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. -
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.
Example:
<FlexibleModal
isOpen={bool}
onRequestClose={this.closeModal}
onFocus={() => console.log("Modal is clicked")}
className={"my-modal-custom-class"}
initWidth={800}
initHeight={400}
>
<h1>Modal Content</h1>
<p>Etc.</p>
</FlexibleModal>
Examples
Inside an app:
import React, {Component} from 'react';
import './App.css';
import FlexibleModal from 'react-modal-touch';
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 (
<div className="App">
<button
onClick={this.openModal}
>
Open modal
</button>
<FlexibleModal initWidth={800} initHeight={400}
onFocus={() => console.log("Modal is clicked")}
className={"my-modal-custom-class"}
onRequestClose={this.closeModal}
isOpen={this.state.modalIsOpen}>
<h3>Flexible Modal</h3>
<div className="body">
<p>This is the modal's body.</p>
</div>
<button
onClick={this.closeModal}
>
Close modal
</button>
</FlexibleModal>
</div>
);
}
}
export default App;