1 | <p align="center">
|
2 | <a href="http://sweetalert.js.org">
|
3 | <img alt="SweetAlert" src="https://raw.githubusercontent.com/t4t5/sweetalert/e3c2085473a0eb5a6b022e43eb22e746380bb955/assets/logotype.png" width="300">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <p align="center">
|
8 | A beautiful replacement for JavaScript's "alert"
|
9 | </p>
|
10 |
|
11 | <p align="center">
|
12 | <a href="https://badge.fury.io/js/sweetalert"><img src="https://badge.fury.io/js/sweetalert.svg" alt="npm version" height="18"></a>
|
13 | <a href="https://travis-ci.org/t4t5/sweetalert"><img src="https://travis-ci.org/t4t5/sweetalert.svg" alt="Build status" /></a>
|
14 | <a href="https://www.npmjs.com/package/sweetalert">
|
15 | <img src="https://img.shields.io/npm/dm/sweetalert.svg" />
|
16 | </a>
|
17 | <a href="https://github.com/t4t5/sweetalert/blob/master/LICENSE">
|
18 | <img src="https://img.shields.io/github/license/t4t5/sweetalert.svg" />
|
19 | </a>
|
20 | <a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/SweetAlert/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/SweetAlert/sponsors/badge.svg" /></a>
|
21 | </p>
|
22 |
|
23 | <p align="center">
|
24 | <img alt="A success modal" src="https://raw.githubusercontent.com/t4t5/sweetalert/e3c2085473a0eb5a6b022e43eb22e746380bb955/assets/swal.gif">
|
25 | </p>
|
26 |
|
27 |
|
28 | ## Installation
|
29 |
|
30 | ```bash
|
31 | $ npm install --save sweetalert
|
32 | ```
|
33 |
|
34 | ## Usage
|
35 |
|
36 | ```javascript
|
37 | import swal from 'sweetalert';
|
38 |
|
39 | swal("Hello world!");
|
40 | ```
|
41 |
|
42 | ## Upgrading from 1.X
|
43 |
|
44 | Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the [upgrade guide](https://sweetalert.js.org/guides/#upgrading-from-1x) to avoid nasty suprises!
|
45 |
|
46 | ## Guides
|
47 |
|
48 | - [Installation](https://sweetalert.js.org/guides/#installation)
|
49 | - [Getting started](https://sweetalert.js.org/guides/#getting-started)
|
50 | - [Advanced examples](https://sweetalert.js.org/guides/#advanced-examples)
|
51 | - [Using with libraries](https://sweetalert.js.org/guides/#using-with-libraries)
|
52 | - [Upgrading from 1.X](https://sweetalert.js.org/guides/#upgrading-from-1x)
|
53 |
|
54 | ## Documentation
|
55 |
|
56 | - [Configuration](https://sweetalert.js.org/docs/#configuration)
|
57 | - [Methods](https://sweetalert.js.org/docs/#methods)
|
58 | - [Theming](https://sweetalert.js.org/docs/#theming)
|
59 |
|
60 | ## Examples
|
61 |
|
62 | ### An error message:
|
63 | ```javascript
|
64 | swal("Oops!", "Something went wrong!", "error");
|
65 | ```
|
66 |
|
67 | ### A warning message, with a function attached to the confirm message:
|
68 | - Using promises:
|
69 | ```javascript
|
70 | swal({
|
71 | title: "Are you sure?",
|
72 | text: "Are you sure that you want to leave this page?",
|
73 | icon: "warning",
|
74 | dangerMode: true,
|
75 | })
|
76 | .then(willDelete => {
|
77 | if (willDelete) {
|
78 | swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
79 | }
|
80 | });
|
81 | ```
|
82 | - Using async/await:
|
83 | ```javascript
|
84 | const willDelete = await swal({
|
85 | title: "Are you sure?",
|
86 | text: "Are you sure that you want to delete this file?",
|
87 | icon: "warning",
|
88 | dangerMode: true,
|
89 | });
|
90 |
|
91 | if (willDelete) {
|
92 | swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
93 | }
|
94 | ```
|
95 |
|
96 | ### A prompt modal, where the user's input is logged:
|
97 | - Using promises:
|
98 | ```javascript
|
99 | swal("Type something:", {
|
100 | content: "input",
|
101 | })
|
102 | .then((value) => {
|
103 | swal(`You typed: ${value}`);
|
104 | });
|
105 | ```
|
106 | - Using async/await:
|
107 | ```javascript
|
108 | const value = await swal("Type something:", {
|
109 | content: "input",
|
110 | });
|
111 |
|
112 | swal(`You typed: ${value}`);
|
113 | ```
|
114 |
|
115 | ### In combination with Fetch:
|
116 | - Using promises:
|
117 | ```javascript
|
118 | swal({
|
119 | text: "Wanna log some information about Bulbasaur?",
|
120 | button: {
|
121 | text: "Search!",
|
122 | closeModal: false,
|
123 | },
|
124 | })
|
125 | .then(willSearch => {
|
126 | if (willSearch) {
|
127 | return fetch("http://pokeapi.co/api/v2/pokemon/1");
|
128 | }
|
129 | })
|
130 | .then(result => result.json())
|
131 | .then(json => console.log(json))
|
132 | .catch(err => {
|
133 | swal("Oops!", "Seems like we couldn't fetch the info", "error");
|
134 | });
|
135 | ```
|
136 | - Using async/await:
|
137 | ```javascript
|
138 | const willSearch = await swal({
|
139 | text: "Wanna log some information about Bulbasaur?",
|
140 | button: {
|
141 | text: "Search!",
|
142 | closeModal: false,
|
143 | },
|
144 | });
|
145 |
|
146 | if (willSearch) {
|
147 | try {
|
148 | const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
|
149 | const json = await result.json();
|
150 | console.log(json);
|
151 | } catch (err) {
|
152 | swal("Oops!", "Seems like we couldn't fetch the info", "error");
|
153 | }
|
154 | }
|
155 | ```
|
156 |
|
157 | ## Using with React
|
158 |
|
159 | SweetAlert has tools for [integrating with your favourite rendering library](https://sweetalert.js.org/guides/#using-with-libraries).
|
160 |
|
161 | If you're using React, you can install [SweetAlert with React](https://www.npmjs.com/package/@sweetalert/with-react) in addition to the main library, and easily add React components to your alerts like this:
|
162 |
|
163 | ```javascript
|
164 | import React from 'react'
|
165 | import swal from '@sweetalert/with-react'
|
166 |
|
167 | swal(
|
168 | <div>
|
169 | <h1>Hello world!</h1>
|
170 | <p>
|
171 | This is now rendered with JSX!
|
172 | </p>
|
173 | </div>
|
174 | )
|
175 | ```
|
176 |
|
177 | [Read more about integrating with React](http://localhost:3000/guides#using-react)
|
178 |
|
179 | ## Contributing
|
180 |
|
181 | ### If you're changing the core library:
|
182 | 1. Make changes in the `src` folder.
|
183 | 2. Preview changes by running `npm run docs`
|
184 | 3. Submit pull request
|
185 |
|
186 | ### If you're changing the documentation:
|
187 | 1. Make changes in the `docs-src` folder.
|
188 | 2. Preview changes by running `npm run docs`
|
189 | 3. Run `npm run builddocs` to compile the changes to the `docs` folder
|
190 | 4. Submit pull request
|
191 |
|
192 | ## Contributors
|
193 |
|
194 | This project exists thanks to all the people who contribute. [[Contribute](https://github.com/t4t5/sweetalert#contributing)].
|
195 | <a href="https://github.com/t4t5/sweetalert/graphs/contributors"><img src="https://opencollective.com/SweetAlert/contributors.svg?width=890&button=false" /></a>
|
196 |
|
197 |
|
198 | ## Backers
|
199 |
|
200 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/SweetAlert#backer)]
|
201 |
|
202 | <a href="https://opencollective.com/SweetAlert#backers" target="_blank"><img src="https://opencollective.com/SweetAlert/backers.svg?width=890"></a>
|
203 |
|
204 |
|
205 | ## Sponsors
|
206 |
|
207 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/SweetAlert#sponsor)]
|
208 |
|
209 | <a href="https://opencollective.com/SweetAlert/sponsor/0/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/0/avatar.svg"></a>
|
210 | <a href="https://opencollective.com/SweetAlert/sponsor/1/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/1/avatar.svg"></a>
|
211 | <a href="https://opencollective.com/SweetAlert/sponsor/2/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/2/avatar.svg"></a>
|
212 | <a href="https://opencollective.com/SweetAlert/sponsor/3/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/3/avatar.svg"></a>
|
213 | <a href="https://opencollective.com/SweetAlert/sponsor/4/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/4/avatar.svg"></a>
|
214 | <a href="https://opencollective.com/SweetAlert/sponsor/5/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/5/avatar.svg"></a>
|
215 | <a href="https://opencollective.com/SweetAlert/sponsor/6/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/6/avatar.svg"></a>
|
216 | <a href="https://opencollective.com/SweetAlert/sponsor/7/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/7/avatar.svg"></a>
|
217 | <a href="https://opencollective.com/SweetAlert/sponsor/8/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/8/avatar.svg"></a>
|
218 | <a href="https://opencollective.com/SweetAlert/sponsor/9/website" target="_blank"><img src="https://opencollective.com/SweetAlert/sponsor/9/avatar.svg"></a>
|
219 |
|
220 |
|