React sweet alert
npm install react-swal-vilan
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:
``bashwith npm
npm install --save react-bootstrap-sweetalert
javascript
const SweetAlert = require('react-bootstrap-sweetalert');
`Changes in version 4.4
-----
* Added
for validating input. default: /^.+$/Changes in version 4.3
-----
* Added
which calls onConfirm to close the alert automatically after a certain number of milliseconds. default: 0Changes in version 4.2
-----
* Fixed auto-focus on confirm button
* Removed outline css from alert
* Updated examples to not show deprecated params
* Added
to control whether you want to focus on the button automatically. default: trueChanges in version 4.1
-----
* Added
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 buttonChanges 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 buttonExamples
--------
The most basic message:
`javascript
`A title with text under:
javascript
It's pretty, isn't it?
`A success message!:
javascript
You clicked the button!
`A warning message, with Cancel and Confirm callbacks:
javascript
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!
`A message with a custom icon:
javascript
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!
`An HTML message:
javascript
onConfirm={this.hideAlert}
>
A custom html message.
`A replacement for the "prompt" function:
javascript
showCancel
cancelBtnBsStyle="default"
title="An input!"
placeHolder="Write something"
onConfirm={this.onRecieveInput}
onCancel={this.hideAlert}
>
Write something interesting:
`Password Prompt:
javascript
inputType="password"
title="Enter Password"
required
validationMsg="You must enter your password!"
onConfirm={this.hideAlert}
/>
`Custom Styles:
javascript
Its blue!
`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.
, 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
--------
` bash
yarn dev && open http://localhost:3000
``