<p><strong><a href="https://sweetalert.js.org/" target="_blank" rel="noreferrer noopener" aria-label="SweetAlert (opens in a new tab)">SweetAlert</a></strong> A beautiful replacement for JavaScript's "alert".</p>

<h2>Installation</h2>

<pre class="wp-block-code"><code>npm install --save sweetalert</code></pre>

<h2>Usage</h2>

<pre class="wp-block-code"><code>import swal from 'sweetalert';
swal("Hello world!");</code></pre>

<h2>Upgrading from 1.X</h2>

<p>Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the&nbsp;<a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">upgrade guide</a>&nbsp;to avoid nasty suprises!</p>

<h2>Guides</h2>

<ul>
<li><a href="https://sweetalert.js.org/guides/#installation" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Installation</a></li>
<li><a href="https://sweetalert.js.org/guides/#getting-started" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Getting started</a></li>
<li><a href="https://sweetalert.js.org/guides/#advanced-examples" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Advanced examples</a></li>
<li><a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Using with libraries</a></li>
<li><a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Upgrading from 1.X</a></li>
</ul>

<h2>Documentation</h2>

<ul>
<li><a href="https://sweetalert.js.org/docs/#configuration" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Configuration</a></li>
<li><a href="https://sweetalert.js.org/docs/#methods" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Methods</a></li>
<li><a href="https://sweetalert.js.org/docs/#theming" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Theming</a></li>
</ul>

<h2>Examples</h2>

<h3>An error message:</h3>

<pre class="wp-block-preformatted">swal("Oops!", "Something went wrong!", "error");</pre>

<h3>A warning message, with a function attached to the confirm message:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete =&gt; {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
});

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}</pre>

<h3>A prompt modal, where the user's input is logged:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal("Type something:", {
  content: "input",
})
.then((value) =&gt; {
  swal(`You typed: NULL`);
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const value = await swal("Type something:", {
  content: "input",
});

swal(`You typed: NULL`);</pre>

<h3>In combination with Fetch:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch =&gt; {
  if (willSearch) {
    return fetch("http://pokeapi.co/api/v2/pokemon/1");
  }
})
.then(result =&gt; result.json())
.then(json =&gt; console.log(json))
.catch(err =&gt; {
  swal("Oops!", "Seems like we couldn't fetch the info", "error");
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willSearch = await swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
});

if (willSearch) {
  try {
    const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
    const json = await result.json();
    console.log(json);
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error");
  }
}</pre>

<h2>Using with React</h2>

<p>SweetAlert has tools for&nbsp;<a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">integrating with your favourite rendering library.</a></p>

<p>If you're using React, you can install&nbsp;<a href="https://www.npmjs.com/package/@sweetalert/with-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">SweetAlert with React</a>&nbsp;in addition to the main library, and easily add React components to your alerts like this:</p>

<pre class="wp-block-preformatted">import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  &lt;div&gt;
    &lt;h1&gt;Hello world!&lt;/h1&gt;
    &lt;p&gt;
      This is now rendered with JSX!
    &lt;/p&gt;
  &lt;/div&gt;
)</pre>

<p><a href="https://sweetalert.js.org/guides/#using-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Read more about integrating with React</a></p>

<p><strong><em>Credit goes to SweetAlerts@<a href="https://sweetalert.js.org/">https://sweetalert.js.org/</a></em></strong></p>

SweetAlert A beautiful replacement for JavaScript's "alert".

SweetAlert - A beautiful replacement for JavaScript's "alert"