<commit_before># react-bootstrap-sweetalert

[![NPM version](http://img.shields.io/npm/v/react-bootstrap-sweetalert.svg)](https://www.npmjs.com/package/react-bootstrap-sweetalert)
[![Downloads](https://img.shields.io/npm/dm/react-bootstrap-sweetalert.svg)](https://www.npmjs.com/package/react-bootstrap-sweetalert)
[![David](https://img.shields.io/david/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)
[![GitHub issues](https://img.shields.io/github/issues/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)
[![license](https://img.shields.io/github/license/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)
[![GitHub stars](https://img.shields.io/github/stars/djorg83/react-bootstrap-sweetalert.svg?style=social&label=Star&maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)

[![NPM](https://nodei.co/npm/react-bootstrap-sweetalert.png?downloads=true&stars=true)](https://nodei.co/npm/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!](http://djorg83.github.io/react-bootstrap-sweetalert/)

Usage
-----

You can install SweetAlert through npm:

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

# with yarn
yarn add react-bootstrap-sweetalert
```

```javascript
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:

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

A title with text under:

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

A success message!:

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

A warning message, with Cancel and Confirm callbacks:

```javascript
<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:

```javascript
<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:

```javascript
<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:

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

Password Prompt:

```javascript
<SweetAlert
	input
	inputType="password"<commit_msg>Fix typo of `placeHolder` to `placeholder`<commit_after># react-bootstrap-sweetalert

[![NPM version](http://img.shields.io/npm/v/react-bootstrap-sweetalert.svg)](https://www.npmjs.com/package/react-bootstrap-sweetalert)
[![Downloads](https://img.shields.io/npm/dm/react-bootstrap-sweetalert.svg)](https://www.npmjs.com/package/react-bootstrap-sweetalert)
[![David](https://img.shields.io/david/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)
[![GitHub issues](https://img.shields.io/github/issues/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)
[![license](https://img.shields.io/github/license/djorg83/react-bootstrap-sweetalert.svg?maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)
[![GitHub stars](https://img.shields.io/github/stars/djorg83/react-bootstrap-sweetalert.svg?style=social&label=Star&maxAge=2592000)](https://github.com/djorg83/react-bootstrap-sweetalert)

[![NPM](https://nodei.co/npm/react-bootstrap-sweetalert.png?downloads=true&stars=true)](https://nodei.co/npm/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!](http://djorg83.github.io/react-bootstrap-sweetalert/)

Usage
-----

You can install SweetAlert through npm:

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

# with yarn
yarn add react-bootstrap-sweetalert
```

```javascript
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:

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

A title with text under:

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

A success message!:

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

A warning message, with Cancel and Confirm callbacks:

```javascript
<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:

```javascript
<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:

```javascript
<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:

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

Password Prompt:

```javascript
<SweetAlert
	input
	inputType="password"
{'fraction_non_alphanumeric': 0.14106964898682317, 'fraction_numerical': 0.013287565053703909, 'mean_word_length': 5.369534555712271, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 45, 'https://': 26, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '579803', 'n_tokens_mistral': 3105, 'n_tokens_neox': 2776, 'n_words': 712}