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