Skip to content

nozzlegear/react-win-dialog

Repository files navigation

@nozzlegear/react-win-dialog

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

Screeshot of React Win Dialog

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={`john.doe@example.com`} />
            </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. */
}