@readwise/sweetalert2
v11.2.0-rc.2TypeScript
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes, supported fork of sweetalert
0/weekUpdated 10 months agoMITUnpacked: 668.6 KB
Published by Limon Monte
npm install @readwise/sweetalert2
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
---
:moneybag: Get $100 in free credits with DigitalOcean!
---
:point_right: Upgrading from v10.x to v11.x? Read the release notes!
If you're upgrading from v9.x, please upgrade from v9 to v10 first!
If you're upgrading from v8.x, please upgrade from v8 to v9 first!
If you're upgrading from v7.x, please upgrade from v7 to v8 first!
If you're upgrading from v6.x, please upgrade from v6 to v7 first!
:point_right: Migrating from SweetAlert? SweetAlert 1.x to SweetAlert2 migration guide
---
Installation
------------
``sh`
npm install --save sweetalert2
Or grab from jsdelivr CDN
:
`html`
Usage
-----
`html`
You can also include the stylesheet separately if desired:
`html`
Or:
`js
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')
`
Or with JS modules:
`html
`
It's possible to import JS and CSS separately, e.g. if you need to customize styles:
`js
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'
`
Please note that TypeScript is well-supported, so you don't have to install a third-party declaration file.
Examples
--------
The most basic message:
`js`
Swal.fire('Hello world!')
A message signaling an error:
`js`
Swal.fire('Oops...', 'Something went wrong!', 'error')
Handling the result of SweetAlert2 modal:
`js`
Swal.fire({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your imaginary file has been deleted.',
'success'
)
// For more information about handling dismissals please visit
// https://sweetalert2.github.io/#handling-dismissals
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
Go here to see the docs and more examples ↗
Browser compatibility
---------------------
Chrome | Firefox | Safari | Edge
-------|---------|--------|-----
:heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:
If you need IE11 and legacy Edge support, please use the previous major version.
Themes (sweetalert2-themes ↗)
------
- Dark
- Minimal
- Borderless
- Bootstrap 4
- Material UI
- WordPress Admin
- Bulma
- Default
Related projects
-------------------------
- ngx-sweetalert2 - Angular 4+ integration
- sweetalert2-react-content - React integration
- sweetalert2-webpack-demo - webpack demo
- sweetalert2-parcel-demo - overriding SCSS variables demo
Related community projects
-------------------------
- avil13/vue-sweetalert2 - Vue.js wrapper
- realrashid/sweet-alert - Laravel 5 Package
- Basaingeal/Razor.SweetAlert2 - Blazor Wrapper
- ElectronAlert - SweetAlert2 for Electron applications (main process)
Contributing
------------
If you would like to contribute enhancements or fixes, please do the following:
1. Fork the sweetalert2 repository and clone it locally.
2. Make sure you have npm or yarn installed.
3. When in the SweetAlert2 directory, run npm install or yarn install to install dependencies.
4. To begin active development, run npm start or yarn start. This does several things for you:dist
- Builds the folder
- Serves sandbox.html @ http://localhost:8080/ (browser-sync ui: http://localhost:8081/)
- Re-builds and re-loads as necessary when files change
5. To run tests, run npm run cypress:open or yarn cypress:open`
Big Thanks
----------
- FlowCrypt for continuous support of this project
- Serena Verni (@serenaperora) for creating the amazing project logo
Sponsors
--------
For all questions related to sponsorship please contact me via email limon.monte@protonmail.com
| 
| 
| 
| 
-|-|-|-|-|-
Become a sponsor | FlowCrypt | life digital | Code Rubik | NDCHost | Bitvape
| 
-|-|-
Halvin Laina | Tiago de Oliveira Stutz | SebaEBC
NSFW Sponsors
-------------
| 
| 
| 
| 
-|-|-|-|-
Sex Toy WoW | Fresh Materials | Joy Love Dolls | STED | My Sex Toy Guide
| 
| 
-|-|-
Best Blowjob Machines | STC | DoctorClimax
Support and Donations
---------------------
Has SweetAlert2 helped you create an amazing application? You can show your support via GitHub Sponsors
Alternative ways for donations (PayPal, cryptocurrencies, etc.) are listed here: https://sweetalert2.github.io/#donations