react-modal-resizable-draggable

Accessible modal dialog component for React.JS

Demo

• link to demo

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
• Usage
• Styles
• Examples
• Testing
• Demos

Installation

To install, you can use npm or yarn:

$ npm install react-modal-resizable-draggable
$ yarn add react-modal-resizable-draggable

Usage

Add following css style to your css file

.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).
• onFocus called when the modal is clicked.
• className The additional class to the modal.

Example:

<Modal
  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>
</Modal>

Examples

Inside an app:

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 (
            <div className="App">
                <button
                    onClick={this.openModal}
                >
                    Open modal
                </button>
                <ReactModal initWidth={800} initHeight={400} 
                onFocus={() => console.log("Modal is clicked")}
                className={"my-modal-custom-class"}
                onRequestClose={this.closeModal} 
                isOpen={this.state.modalIsOpen}>
                    <h3>My Modal</h3>
                    <div className="body">
                        <p>This is the modal&apos;s body.</p>
                    </div>
                    <button
                        onClick={this.closeModal}
                    >
                        Close modal
                    </button>
                </ReactModal>
            </div>
        );
    }
}

export default App;