Package Exports

react-win32dialog

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-win32dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-win32dialog
💠

react-win32dialog box

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.

GitHub

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.