{"id":14971607,"url":"https://github.com/gikoskos/react-win32dialog","last_synced_at":"2025-10-26T16:30:54.134Z","repository":{"id":57156737,"uuid":"151730309","full_name":"Gikoskos/react-win32dialog","owner":"Gikoskos","description":":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.","archived":false,"fork":false,"pushed_at":"2018-11-04T20:45:00.000Z","size":5623,"stargazers_count":33,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T21:27:44.999Z","etag":null,"topics":["es6","javascript","react","react-component","ui","window-manager"],"latest_commit_sha":null,"homepage":"https://gikoskos.github.io/react-win32dialog/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gikoskos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-05T14:09:21.000Z","updated_at":"2023-12-26T02:05:05.000Z","dependencies_parsed_at":"2022-08-30T05:32:24.882Z","dependency_job_id":null,"html_url":"https://github.com/Gikoskos/react-win32dialog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gikoskos%2Freact-win32dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gikoskos%2Freact-win32dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gikoskos%2Freact-win32dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gikoskos%2Freact-win32dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gikoskos","download_url":"https://codeload.github.com/Gikoskos/react-win32dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238366788,"owners_count":19460186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","javascript","react","react-component","ui","window-manager"],"created_at":"2024-09-24T13:45:32.449Z","updated_at":"2025-10-26T16:30:53.787Z","avatar_url":"https://github.com/Gikoskos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003ca href=\"https://gikoskos.github.io/react-win32dialog/\"\u003ereact-win32dialog\u003c/a\u003e\u003c/h1\u003e\n\nReact 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.\n\n[![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)\n\n## Overview\n\nWin32Dialog windows act a lot like classic Windows OS dialog boxes.\n\nThey can be resized by left-clicking and dragging from any edge.\n\n![red-border](https://i.imgur.com/8eRyJWC.png)\n\nThey can be moved around by left-clicking and dragging the titlebar.\n\n![red-titlebar](https://i.imgur.com/eCBPQGt.png)\n\nThey can be minimized, maximized and closed by using the titlebar buttons.\n\n![red-buttons](https://i.imgur.com/wmQ5Z1t.png)\n\n[Check out the tutorial](https://gikoskos.github.io/react-win32dialog/)\n\nNote that this component relies heavily on mouse events, so it might not work as intended in environments that don't use mouse pointers.\n\n## Install\n\n```bash\nnpm install --save react-win32dialog\n```\n\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport Win32Dialog from 'react-win32dialog';\n\nclass Example extends React.Component {\n    static blurText = \"Dialog doesn't have focus!\";\n    static focusText = \"Dialog has focus!\";\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            text: Example.blurText,\n        };\n    }\n\n    _onFocus = () =\u003e {\n        this.setState({\n            text: Example.focusText\n        });\n    }\n\n    _onBlur = () =\u003e {\n        this.setState({\n            text: Example.blurText\n        });\n    }\n\n    render () {\n        return (\n            \u003cWin32Dialog\n                x={500}\n                y={500}\n                width={200}\n                height={200}\n                minWidth={150}\n                minHeight={50}\n                title=\"My first react-win32dialog box!\"\n                icon=\"myicon.jpg\"\n                onExit={() =\u003e true}\n                onBlur={this._onBlur}\n                onFocus={this._onFocus}\n                \u003e\n                \u003cdiv\u003e\n                    {this.state.text}\n                \u003c/div\u003e\n            \u003c/Win32Dialog\u003e\n        );\n    }\n}\n```\n\n## Props\n\n|   Property    |   Type   |                           Default                            |                         Description                          |\n| :-----------: | :------: | :----------------------------------------------------------: | :----------------------------------------------------------: |\n|      `x`      |  number  |                              1                               |              Initial x position of the dialog.               |\n|      `y`      |  number  |                              1                               |              Initial y position of the dialog.               |\n|    `width`    |  number  |                          `minWidth`                          |        Initial width if it's larger than `minWidth`.         |\n|   `height`    |  number  |                         `minHeight`                          |       Initial height if it's larger than `minHeight`.        |\n|  `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.            |\n|  `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.           |\n| `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.              |\n|    `title`    |  string  |                    React Win32 dialog box                    |       Text that is displayed on the dialog's titlebar.       |\n|    `icon`     |  string  |              `assets/default-titlebar-icon.png`              |       Icon that is displayed on the dialog's titlebar.       |\n|   `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. |\n|   `onBlur`    | function |                          undefined                           |            Is called when the dialog loses focus.            |\n|   `onFocus`   | function |                          undefined                           |            Is called when the dialog gains focus.            |\n\nAll the number type props are measured in pixels.\n\n## Contributing\n\nIf you find a bug or want to add a feature feel free to make a PR or open an Issue.\n\n## License\n\n [Gikoskos](https://github.com/Gikoskos) © MIT 2018 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgikoskos%2Freact-win32dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgikoskos%2Freact-win32dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgikoskos%2Freact-win32dialog/lists"}