Skip to content

wwan5803/react-modal-resizable-draggable

Repository files navigation

react-modal-resizable-draggable

Accessible modal dialog component for React.JS

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

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).
  • 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:

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;

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •