react-win32dialog

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #go #golang #machine-learning #rust #linux #nodejs #awesome #pytorch #security #ios #openai

react-win32dialog

(★ 33)

: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.

react-win32dialog 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center"><a href="https://gikoskos.github.io/react-win32dialog/">react-win32dialog</a></h1>

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

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

react-win32dialog

react-win32dialog 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-win32dialog

react-win32dialog 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README