react-drag-resize-dock-modal

React-Drag-Resize-Dock-Modal is a customizable and easy-to-use React component that combines the functionality of draggable, resizable, dockable, and modal windows. It provides a flexible and powerful solution for creating complex user interfaces with multiple overlapping windows.

Install

With npm :

npm install react-drag-resize-dock-modal

* Add --save if npm is under 5.0.0

With Yarn :

yarn add react-drag-resize-dock-modal

Usage

import React, { Component } from 'react'

import ReactModal from 'react-drag-resize-dock-modal'
import 'react-drag-resize-dock-modal/dist/index.css'

class Example extends Component {
  render() {
    return <ReactModal />
  }
}

* Check the example in folder of the same name

License

MIT © Fefoler01

Tree

.
├── CHANGELOG.md
├── example
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   └── manifest.json
│   ├── README.md
│   ├── src
│   │   ├── App.test.tsx
│   │   ├── App.tsx
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── mystyles.css
│   │   ├── react-app-env.d.ts
│   │   └── setupTests.ts
│   └── tsconfig.json
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── index.test.tsx
│   ├── index.tsx
│   ├── styles.module.css
│   └── typings.d.ts
├── tsconfig.json
└── tsconfig.test.json

For development

To obtain the tree of the project :

tree -I 'node_modules|dist' <-d(directories)> <-L number(level of depth)>

TODO :

• add dockable functionality
• add usefull options from draggable component
• impose cursor type when hloding down mouse
• check version of dependencies
• add test unit