react-window-modal 
A React wrapper for the window-modal package;
A modal window element designed to be smooth, clean and user friendly.
Includes many features and options!
Demo
Feature and improvement suggestions welcome!
Features
- Supports TypeScript
- Highly tested
- Movable
- Resizable
- Titles (with icons)
- Minimize
- Close
- Scrollable
- Customizable style (override styles with classnames, may have to use
!important) - Many options!
Setup
npm install react-window-modalthen
const WindowModal = ;or
;Usage
{ return <WindowModal>contents</WindowModal>}Props
* All props are optional
| Name | Type | Description |
|---|---|---|
| title | string | The title for the window |
| icon | IWindowIcon | An icon to use for the window |
| pos | IPoint | The starting position for the window |
| size | IPoint | The starting size for the (must be greater than 200!) |
| resizable | boolean | If false, the window cannot be resized by the user |
| movable | boolean | If false, the window cannot be moved by the user |
| compact | boolean | If true, the style for the window's title bar will have less spacing |
| hideClose | boolean | If true, no close button will be added to the window |
| hideMinimize | boolean | If true, no minimize button will be added to the window |
Events
| Name | Type | Description |
|---|---|---|
| onClose | Function | Called when the window is closed |
| onMinimize | Function | Called when the window is minimized |
| onUnminimize | Function | Called when the window is unminimized |
| onResize | Function | Called when the window is resized |
| onMove | Function | Called when the window is moved |
| onFocus | Function | Called when the window is focused |
| onBlur | Function | Called when the window is blurred |