react-window-modal

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-modal

then

const WindowModal = require("react-window-modal");

or

import WindowModal from "react-window-modal";

Usage

render() {
    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