https://github.com/nozzlegear/react-win-dialog
An attempt to recreate the Dialog element from WinJS.
https://github.com/nozzlegear/react-win-dialog
definition dialog modal react typescript windows winjs
Last synced: 4 months ago
JSON representation
An attempt to recreate the Dialog element from WinJS.
- Host: GitHub
- URL: https://github.com/nozzlegear/react-win-dialog
- Owner: nozzlegear
- License: mit
- Created: 2017-02-11T21:20:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-28T14:26:54.000Z (over 3 years ago)
- Last Synced: 2025-06-06T17:42:26.706Z (4 months ago)
- Topics: definition, dialog, modal, react, typescript, windows, winjs
- Language: TypeScript
- Size: 119 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @nozzlegear/react-win-dialog
An attempt to recreate the Dialog element from WinJS, with full TypeScript definitions.
## Installation
With [Yarn](https://github.com/yarnpkg/yarn):
```shell
yarn install @nozzlegear/react-win-dialog
```
Or from [NPM](https://npmjs.com/package/@nozzlegear/react-win-dialog):
```shell
npm install @nozzlegear/react-win-dialog --save
```
## Importing
Import React-Win-Dialog via ES6 default import:
```js
import Dialog from "@nozzlegear/react-win-dialog";
```
Or via Node's require:
```js
const Dialog = require("@nozzlegear/react-win-dialog").default;
```
## Example
```js
import Dialog from "@nozzlegear/react-win-dialog";
render() {
return (
this.setState({dialogOpen: false})}>
{`Wolf kogi whatever cold-pressed. Nihil artisan semiotics williamsburg nulla.`}
{`Username`}
{`Password`}
)
}
```
## 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. |
| `overlayPreventsScrolling` | boolean | true | Whether the dialog should prevent scrolling of the body elements under/behind the dialog when the dialog is open. |
| `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. */
}
```