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.

Overview

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

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

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

They can be minimized, maximized and closed by using the titlebar 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. |

All the number type props are measured in pixels.

Contributing

If you find a bug or want to add a feature feel free to make a PR or open an Issue.

License

Gikoskos © MIT 2018