Easy and Quickly. The React modal-dialog component with react-bootstrap, alternates window.confirm, window.alert, and window.prompt.
Branch: master
Clone or download
Latest commit 20efa16 Jan 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.scripts first commit Sep 12, 2016
.storybook Change directories Feb 10, 2018
src Use index for the key in lists Jan 27, 2019
.babelrc Update many libraries and reduce dependencies. Sep 21, 2017
.gitignore first commit Sep 12, 2016
.npmignore first commit Sep 12, 2016
.travis.yml update travis Sep 12, 2016
CHANGELOG.md Update 0.11.0 Jan 27, 2019
CONTRIBUTING.md little fix Jan 27, 2019
LICENSE little fix Sep 18, 2016
README.md update readme Jan 27, 2019
package.json v0.11.0 Jan 27, 2019
yarn.lock Add to support react-bootstrap v4. Jan 27, 2019

README.md

React Bootstrap Dialog

npm version Build Status

The React component library for alert or dialog based on react-bootstrap's <Modal />. Configurable and easy to use alternative for window.alert, window.confirm, or window.prompt in your React application.

https://gyazo.com/d9c073c6c7d66c05e5398f386345f452

You can use with react-bootstrap v3 or v4. (v4 since react-bootstrap-dialog v0.11.0)

Index:

Screenshots

Default Alert Default Dialog
Alternative for window.alert Alternative for window.confirm
https://gyazo.com/84e315aca42ac4dbe39e51ce3451bb53 https://gyazo.com/f8e8bfd41d9c652a55ed06a0828dc57e
Text Prompt Password Prompt
Alternative for window.prompt Easy password input
https://gyazo.com/e621e62d17037ab0d1e40fda721ecbb2 https://gyazo.com/b249233c97a4519f565a6885902befc3

Demo and Sample

Usage

Install

npm i react-bootstrap-dialog --save

or

yarn add react-bootstrap-dialog

Quick start

Step 1. Import package.

import Dialog from 'react-bootstrap-dialog'

Step 2. Write jsx in render method.

<Dialog ref={(el) => { this.dialog = el }} />

Step 3. Call showAlert method or show method.

this.dialog.showAlert('Hello Dialog!')

Full sample:

import React from 'react'
import {Button} from 'react-bootstrap'
import Dialog from 'react-bootstrap-dialog'

export default class SampleCode extends React.Component {
  constructor () {
    super()
    this.onClick = this.onClick.bind(this)
  }

  onClick () {
    this.dialog.showAlert('Hello Dialog!')
  }

  render () {
    return (
      <div>
        <Button onClick={this.onClick}>Show alert</Button>
        <Dialog ref={(component) => { this.dialog = component }} />
      </div>
    )
  }
}

Documents

Index:

Dialog

setOptions(options)

Set default options for applying to all dialogs

  • options: [Object] The parameters for default options.
    • defaultOkLabel: [String, Node] The default label for OK button. Default is 'OK'.
    • defaultCancelLabel: [String, Node] The default label for Cancel button. Default is 'Cancel'.
    • primaryClassName: [String] The class name for primary button. Default is 'btn-primary'
    • defaultButtonClassName: [String] The class name for ordinary button. Default is 'btn-default btn-outline-secondary'
      • Notice: The default value includes v3 and v4 classes.
Example
Dialog.setOptions({
  defaultOkLabel: 'Yes! Yes! Yes!',
  defaultCancelLabel: 'Noooooooo!!',
  primaryClassName: 'btn-success',
  defaultButtonClassName: 'btn-link'
})

resetOptions()

Reset default options to presets.

Example
Dialog.resetOptions()

<Dialog />

show(options)

Show dialog with choices. This is similar to window.confirm.

  • options: [Object] The parameters for options.
    • title: [String, Node] The title of dialog.
    • body: [String, Node] The body of message.
    • actions: [Array[DialogAction]] The choices for presenting to user. See DialogAction generators.
    • bsSize: [String] The width size for dialog.
      • with react-bootstrap v3: You can choose from [null, 'medium', 'large', 'small'].
      • with react-bootstrap v4: You can choose from [null, 'medium', 'lg', 'sm'].
    • onHide: [Function] The method to call when the dialog was closed by clicking background.
    • prompt: [DialogPrompt] The prompt to get user input. See DialogPrompt generators.
Example
this.dialog.show({
  title: 'Greedings',
  body: 'How are you?',
  actions: [
    Dialog.CancelAction(),
    Dialog.OKAction()
  ],
  bsSize: 'small',
  onHide: (dialog) => {
    dialog.hide()
    console.log('closed by clicking background.')
  }
})

showAlert(body, bsSize = undefined)

Show message dialog This is similar to window.alert.

  • body: [String, Node] The body of message.
  • bsSize: [String] The width size for dialog. You can choose in [null, 'medium', 'large', 'small'].
Example
this.dialog.showAlert('Hello world!')

hide()

Hide this dialog.

Example
this.dialog.hide()

DialogAction generators

Dialog.Action(label, func, className)

The customized choice for options.actions in dialog.show.

  • label: [String, Node] The label for the button.
  • func: [Function] The method to call when the button is clicked.
  • className: The class name for the button.
Example
Dialog.Action(
  'Hello',
  () => console.log('Hello!'),
  'btn-info'
)

Dialog.DefaultAction(label, func, className)

The default choice for options.actions in dialog.show.

  • label: [String, Node] The label for the button.
  • func: [Function] The method to call when the button is clicked.
  • className: The class name for the button. (Default is 'btn-primary')
Example
Dialog.DefaultAction(
  'Remove',
  () => {
    console.log('Remove action will be executed!')
  },
  'btn-danger'
)

Dialog.OKAction(func)

The OK choice for options.actions in dialog.show. It uses default ok label ('OK') and default primary class ('btn-primary').

  • func: [Function] The method to call when the button is clicked.
Example
Dialog.OKAction(() => {
  console.log('OK was clicked!')
})

Dialog.CancelAction(func)

The Cancel choice for options.actions in dialog.show. It uses default cancel label ('Cancel').

  • func: [Function] The method to call when the button is clicked.
Example 1
Dialog.CancelAction(() => {
  console.log('Cancel was clicked!')
})
Example 2
// Do nothing.
Dialog.CancelAction()

DialogPrompt generators

Dialog.TextPrompt(options = {})

The prompt settings to show text input for options.prompt in dialog.show.

  • options: [Object] The parameters for options.
    • initialValue: [String] The initial value for the prompt.
    • placeholder: [String] The placeholder for the prompt.
Example
Dialog.TextPrompt()

// or

Dialog.TextPrompt({initialValue: 'me@example.com', placeholder: 'your email'})

Dialog.PasswordPrompt(options = {})

The prompt settings to show password input for options.prompt in dialog.show.

  • options: [Object] The parameters for options.
    • initialValue: [String] The initial value for the prompt.
    • placeholder: [String] The placeholder for the prompt.
Example
Dialog.PasswordPrompt()

// or

Dialog.PasswordPrompt({initialValue: 'previous~pa$sw0rd', placeholder: 'your password'})