# react-win-dialog > An attempt to recreate the Dialog element from WinJS. Latest version **1.7.0** (published 2022-02-24) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install react-win-dialog pnpm add react-win-dialog yarn add react-win-dialog bun add react-win-dialog ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.7.0 | | Published | 2022-02-24 | | First published | 2017-02-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 32 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Joshua Harms | | Maintainers | nozzlegear | | Keywords | react, winjs, dialog, windows, uwp | ## Links - npm: https://www.npmjs.com/package/react-win-dialog - Repository: https://github.com/nozzlegear/react-win-dialog - Homepage: https://github.com/nozzlegear/react-win-dialog#readme - Issues: https://github.com/nozzlegear/react-win-dialog/issues - npm.io page: https://npm.io/package/react-win-dialog ## Dependencies (2) - [react](https://npm.io/package/react.md) ^17.0.2 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.7.0 (latest) — 2022-02-24 - 1.6.0 — 2022-02-11 - 1.5.0 — 2022-01-31 - 1.4.0 — 2017-11-17 - 1.3.0 — 2017-06-09 - 1.2.0 — 2017-03-14 - 1.1.0 — 2017-02-17 - 1.0.4 — 2017-02-12 - 1.0.3 — 2017-02-12 - 1.0.2 — 2017-02-12 - 1.0.1 — 2017-02-12 - 1.0.0 — 2017-02-12 ## README # react-win-dialog An attempt to recreate the Dialog element from WinJS, with full TypeScript definitions. ![Screeshot of React Win Dialog](https://i.imgur.com/l20vhNe.png) ## Installation With [Yarn](https://github.com/yarnpkg/yarn): ```shell yarn install react-win-dialog ``` Or from [NPM](https://npmjs.com/package/react-win-dialog): ```shell npm install react-win-dialog --save ``` ## Importing Import React-Win-Dialog via ES6 default import: ```js import Dialog from "react-win-dialog"; ``` Or via Node's require: ```js const Dialog = require("react-win-dialog").default; ``` ## Example ```js import Dialog from "react-win-dialog"; render() { return ( this.setState({dialogOpen: false})}>

{`Wolf kogi whatever cold-pressed. Nihil artisan semiotics williamsburg nulla.`}

 ) } ``` ## Props Note: React-Win-Dialog has full TypeScript definitions! You should automatically receive intellisense for all of the props documented below: | Name | Type | Required | Description | |------|------|----------|-------------| | `title` | string | true | The dialog's title. | | `open` | boolean | true | Whether the dialog is open or not. | | `children` | element | true | The dialog's content body. | | `danger` | boolean | false | Change's the dialog's outline and primary button color to red when true. | | `primaryText` | string | false | The dialog's primary (right) button text. | | `secondaryText` | string | false | The dialog's secondary (left) button text. | | `onPrimaryClick` | function | false | Event handler called when the primary (right) button is clicked. | | `onSecondaryClick` | function | false | Event handler called when the secondary (left) button is clicked. | | `loading` | boolean | false | Indicates that data is being loaded or saved. Default `false`. | | `loadingComponent` | React.ReactNode | false | A custom component to use as the loading indicator when `loading` is true. Defaults to a `` element. | | `loadingHidesButtons` | boolean | false | Whether the dialog should hide its primary and secondary buttons when `loading` is true. Defaults to `true`.| | `overlayStyle` | object | false | CSS style object applied to the overlay container. | | `containerStyle` | object| false | CSS style object applied to the dialog container. | | `dialogStyle` | object | false | CSS style object applied to the dialog. | | `id` | string | false | Element id applied to the dialog container. | | `className` | string | false | CSS classnames applied to the dialog container. | ## Styling If you'd like to style the modal buttons yourself, just use the following CSS rules: ```css .react-win-dialog-overlay { /* This styles the semi-transparent background overlay. * Note that the dialog itself is *not* a child of this element. */ } .react-win-dialog-container .react-win-dialog .btn.react-win-dialog-secondary-command { /* This styles the secondary (left) button. */ } .react-win-dialog-container .react-win-dialog .btn.primary.react-win-dialog-primary-command { /* This styles the primary (primary) button. */ } .react-win-dialog-container .react-win-dialog.danger { /* This styles the dialog when `danger=true` is passed to the component. */ } .react-win-dialog-container .react-win-dialog.danger .btn.danger.react-win-dialog-primary-command { /* This styles the primary (right) button when `danger=true` is passed to the component. */ } .react-win-dialog-container .react-win-dialog .react-win-dialog-content .react-win-dialog-loading-container { /* This styles the loading indicator container when `loading=true` is passed to the component. */ } .react-win-dialog-container .react-win-dialog .react-win-dialog-content .react-win-dialog-loading-container progress.react-win-dialog-loading-bar { /* This styles the default progress bar used as the loading indicator when `loading=true` is passed to the component without a custom loading indicator component. */ } ``` --- _Source: https://npm.io/package/react-win-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._