@nozzlegear/react-win-dialog

An attempt to recreate the Dialog element from WinJS, with full TypeScript definitions.

Installation

With Yarn:

yarn install @nozzlegear/react-win-dialog

Or from NPM:

npm install @nozzlegear/react-win-dialog --save

Importing

Import React-Win-Dialog via ES6 default import:

import Dialog from "@nozzlegear/react-win-dialog";

Or via Node's require:

const Dialog = require("@nozzlegear/react-win-dialog").default;

Example

import Dialog from "@nozzlegear/react-win-dialog";

render() {
    return (
        <Dialog
            open={this.state.dialogOpen}
            title={`React Win Dialog`}
            primaryText={`Save Changes`}
            secondaryText={`Close`}
            onSecondaryClick={e => this.setState({dialogOpen: false})}>
            <p>{`Wolf kogi whatever cold-pressed.  Nihil artisan semiotics williamsburg nulla.`}</p>
            <div className={`control-group`}>
                <label>{`Username`}</label>
                <input type={`text`} placeholder={`[e-mail]`} />
            </div>
            <div className={`control-group`}>
                <label>{`Password`}</label>
                <input type={`password`} />
            </div>
        </Dialog>
    )
}

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 <progress /> 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:

.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. */
}