https://github.com/gikoskos/react-win32dialog

:diamond_shape_with_a_dot_inside: Modeless, resizeable and moveable dialog boxes with a classic Windows look-and-feel. Comes with a lightweight window manager that supports window stacking.
https://github.com/gikoskos/react-win32dialog

es6 javascript react react-component ui window-manager

Last synced: 8 months ago
JSON representation

:diamond_shape_with_a_dot_inside: Modeless, resizeable and moveable dialog boxes with a classic Windows look-and-feel. Comes with a lightweight window manager that supports window stacking.

• Host: GitHub
• URL: https://github.com/gikoskos/react-win32dialog
• Owner: Gikoskos
• License: mit
• Created: 2018-10-05T14:09:21.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-04T20:45:00.000Z (over 7 years ago)
• Last Synced: 2025-01-31T21:27:44.999Z (over 1 year ago)
• Topics: es6, javascript, react, react-component, ui, window-manager
• Language: JavaScript
• Homepage: https://gikoskos.github.io/react-win32dialog/
• Size: 5.36 MB
• Stars: 33
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
react-win32dialog


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](https://img.shields.io/npm/v/react-win32dialog.svg)](https://www.npmjs.com/package/react-win32dialog) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-win32dialog.svg) ![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)

## 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](https://i.imgur.com/8eRyJWC.png)

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

![red-titlebar](https://i.imgur.com/eCBPQGt.png)

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

![red-buttons](https://i.imgur.com/wmQ5Z1t.png)

[Check out the tutorial](https://gikoskos.github.io/react-win32dialog/)

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

```bash

npm install --save react-win32dialog

```

## Usage

```jsx

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 (

             true}

                onBlur={this._onBlur}

                onFocus={this._onFocus}

                >

                


                    {this.state.text}

                

            

        );

    }

}

```


## 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`](https://github.com/Gikoskos/react-win32dialog/blob/master/src/rect.js#L9) |           Minimum width that the dialog can have.            |

|  `minHeight`  |  number  | See [`rect.js/defaultRect`](https://github.com/Gikoskos/react-win32dialog/blob/master/src/rect.js#L9) |           Minimum height that the dialog can have.           |

| `borderWidth` |  number  | See [`rect.js/defaultRect`](https://github.com/Gikoskos/react-win32dialog/blob/master/src/rect.js#L9) |             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](https://github.com/Gikoskos) © MIT 2018