react-bootstrap-sweetalert-te v40.4.4

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

Related projects

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

Development

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