react-bootstrap-sweetalert

SweetAlert for React/Bootstrap

An awesome replacement for JavaScript's alert.

Demo

See the demo site here, with basic examples, and a sandbox for testing your own!

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.4

• Added props.validationRegex for validating input. default: /^.+$/

Changes in version 4.3

• Added props.timeout which calls onConfirm to close the alert automatically after a certain number of milliseconds. default: 0

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.
validationRegex	no	object	/^.+$/	Used to validate input 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.
timeout	no	number	0	Call props.onConfirm to close the alert automatically after a certain number of milliseconds.

Related projects

• SweetAlert
• SweetAlert for Android
• SweetAlert for Bootstrap
• SweetAlert for AngularJS
• SweetAlert for RubyOnRails

Development

yarn dev && open http://localhost:3000