A React implementation of SweetAlert

by React

react-bootstrap-sweetalert

An awesome replacement for JavaScript's alert.

Usage

You can install SweetAlert through npm:

# with npm
npm install --save react-bootstrap-sweetalert

# with yarn
yarn add react-bootstrap-sweetalert

const SweetAlert = require('react-bootstrap-sweetalert');

Changes in version 4.2

  • Fixed auto-focus on confirm button
  • Removed outline css from alert
  • Updated examples to not show deprecated params
  • Added props.focusConfirmBtn to control whether you want to focus on the button automatically. default: true

Changes in version 4.1

  • Added props.closeOnClickOutside to trigger onClose when clicking outside. default=true
  • Added props.btnSize to allow custom button size
  • Added props.confirmBtnCssClass to allow custom class on confirm button
  • Added props.cancelBtnCssClass to allow custom class on cancel button
  • Added props.confirmBtnStyle to allow custom inline style on confirm button
  • Added props.cancelBtnStyle to allow custom inline style on cancel button

Changes in version 4.0

  • Added prop-types as peer dependency
  • Added props.showConfirm to allow hiding the confirm button
  • Added props.show to allow hiding the confirm button

Examples

The most basic message:

<SweetAlert title="Here's a message!" onConfirm={this.hideAlert} />

A title with text under:

<SweetAlert title="Here's a message!" onConfirm={this.hideAlert}>
	It's pretty, isn't it?
</SweetAlert>

A success message!:

<SweetAlert success title="Good job!" onConfirm={this.hideAlert}>
	You clicked the button!
</SweetAlert>

A warning message, with Cancel and Confirm callbacks:

<SweetAlert 
	warning
	showCancel
	confirmBtnText="Yes, delete it!"
	confirmBtnBsStyle="danger"
	cancelBtnBsStyle="default"
	title="Are you sure?"
	onConfirm={this.deleteFile}
	onCancel={this.cancelDelete}
>
	You will not be able to recover this imaginary file!
</SweetAlert>

A message with a custom icon:

<SweetAlert
	custom
	showCancel
	confirmBtnText="Yes"
	cancelBtnText="No"
	confirmBtnBsStyle="primary"
	cancelBtnBsStyle="default"
	customIcon="thumbs-up.jpg"
	title="Do you like thumbs?" 
	onConfirm={this.hideAlert}
	onCancel={this.hideAlert}
>
	You will find they are up!
</SweetAlert>

An HTML message:

<SweetAlert 
	title={<span>HTML <small>Title</small>!</span>} 
	onConfirm={this.hideAlert}
>
	<span>A custom <span style={{color:'#F8BB86'}}>html</span> message.</span>
</SweetAlert>

A replacement for the "prompt" function:

<SweetAlert
	input
	showCancel
	cancelBtnBsStyle="default"
	title="An input!"
	placeHolder="Write something"
	onConfirm={this.onRecieveInput}
	onCancel={this.hideAlert}
>
	Write something interesting:
</SweetAlert>

Password Prompt:

<SweetAlert
	input
	inputType="password"
	title="Enter Password"
	required
    validationMsg="You must enter your password!"
	onConfirm={this.hideAlert}
/>

Custom Styles:

<SweetAlert style={{backgroundColor:'blue'}} title="Yay!" onConfirm={this.hideAlert}>
	Its blue!
</SweetAlert>

Configuration

Property Required? Prop Type Default Value Description
type no string 'default' The type of alert to display. Allowed values: 'default', 'info', 'success', 'warning', 'danger', 'error', 'input', 'custom'
title yes string, node undefined The text to display for the title. JSX/ReactNode allowed.
onCancel no func undefined Invoked when user clicks cancel button. Also invoked if allowEscape is true and user hits ESCAPE key.
onConfirm yes func undefined Invoked when user clicks confirm button. Also invoked if user hits ENTER key.
btnSize no string 'lg' Allow custom button size. lg, sm, xs.
confirmBtnText no string, node 'OK' Text of confirm button, or JSX/ReactNode.
confirmBtnBsStyle no string 'primary' Bootstrap style of confirm button. Allowed values: 'default', 'primary', 'link', 'info', 'success', 'warning', 'danger'
confirmBtnCssClass no string '' CSS class added to confirm button.
confirmBtnStyle no object {} Inline style added to confirm button.
cancelBtnText no string, node 'Cancel' Text of cancel button, or JSX/ReactNode.
cancelBtnBsStyle no string 'link' Bootstrap style of cancel button. Allowed values: 'default', 'primary', 'link', 'info', 'success', 'warning', 'danger'
cancelBtnCssClass no string '' CSS class added to cancel button.
cancelBtnStyle no object {} Inline style added to cancel button.
customIcon no string, node undefined Either a string url for an image to use as the icon, or JSX/ReactNode.
placeholder no string undefined If type is input, this is the placeholder for the input field.
show no bool true If false, the alert will not be rendered.
focusConfirmBtn no bool true If true (and type != input) the comfirm button will receive focus automatically.
required no bool true If true, requires the input field to have a value.
validationMsg no string 'Please enter a response!' If type is input, this is the message to diplay when the user clicks confirm without entering a value.
defaultValue no string undefined If type is input, this is the default value for the input field.
inputType no string 'text' If type is input, this is the input type (text, textarea, password, number, etc...)
style no object undefined Style overrides applied to the sweetalert wrapper.
customClass no string undefined Custom CSS class applied to the sweetalert wrapper.
showConfirm no bool true If false, the confirm button will not show.
showCancel no bool false If true, the cancel button will show.
allowEscape no bool true If true, the onCancel function will be invoked when the user hits the ESCAPE key.
closeOnClickOutside no bool true If true, clicking outside the modal will trigger onCancel.
hideOverlay no bool false If true, then the modal overlay will not be rendered.
disabled no bool false If true, then the confirm button will be disabled. (NOTE: This does not effect the allowEscape prop behavior.)
beforeMount no func noop Hook which is invoked during componentWillMount.
afterMount no func noop Hook which is invoked during componentDidMount.
beforeUpdate no func noop Hook which is invoked during componentWillUpdate.
afterUpdate no func noop Hook which is invoked during componentDidUpdate.
beforeUnmount no func noop Hook which is invoked during componentWillUnmount.

GitHub