React-win32dialog NPM

React component library for modeless, resizeable and moveable dialog boxes with a classic Windows look-and-feel. Comes with a light-weight window manager that supports multiple dialog boxes and stacking.

npm bundle size (minified + gzip) GitHub

Overview

Win32Dialog windows act a lot like classic Windows OS dialog boxes.

They can be resized by left-clicking and dragging from any edge.

red-border

They can be moved around by left-clicking and dragging the titlebar.

red-titlebar

They can be minimized, maximized and closed by using the titlebar buttons.

red-buttons

Check out the tutorial

Note that this component relies heavily on mouse events, so it might not work as intended in environments that don't use mouse pointers.

Install

npm install --save react-win32dialog

Usage

import React from 'react';
import Win32Dialog from 'react-win32dialog';

class Example extends React.Component {
    static blurText = "Dialog doesn't have focus!";
    static focusText = "Dialog has focus!";

    constructor(props) {
        super(props);

        this.state = {
            text: Example.blurText,
        };
    }

    _onFocus = () => {
        this.setState({
            text: Example.focusText
        });
    }

    _onBlur = () => {
        this.setState({
            text: Example.blurText
        });
    }

    render () {
        return (
            <Win32Dialog
                x={500}
                y={500}
                width={200}
                height={200}
                minWidth={150}
                minHeight={50}
                title="My first react-win32dialog box!"
                icon="myicon.jpg"
                onExit={() => true}
                onBlur={this._onBlur}
                onFocus={this._onFocus}
                >
                <div>
                    {this.state.text}
                </div>
            </Win32Dialog>
        );
    }
}

Props

Property	Type	Default	Description
`x`	number	1	Initial x position of the dialog.
`y`	number	1	Initial y position of the dialog.
`width`	number	`minWidth`	Initial width if it's larger than `minWidth`.
`height`	number	`minHeight`	Initial height if it's larger than `minHeight`.
`minWidth`	number	See `rect.js/defaultRect`	Minimum width that the dialog can have.
`minHeight`	number	See `rect.js/defaultRect`	Minimum height that the dialog can have.
`borderWidth`	number	See `rect.js/defaultRect`	Width of the dialog's outer border.
`title`	string	React Win32 dialog box	Text that is displayed on the dialog's titlebar.
`icon`	string	`assets/default-titlebar-icon.png`	Icon that is displayed on the dialog's titlebar.
`onExit`	function	undefined	Is called when the dialog's `X` button is pressed. It should return a truthy value for the dialog to exit. If it returns falsy, the X button doesn't close the dialog.
`onBlur`	function	undefined	Is called when the dialog loses focus.
`onFocus`	function	undefined	Is called when the dialog gains focus.