SweetAlert

SweetAlert returns a Promise that tracks user interaction.

• If the user clicks the confirm button, the promise resolves to true (or a specific value if configured).
• If the alert is dismissed (e.g., clicking outside the modal), the promise resolves to null.

Dangerous Actions

To warn users before dangerous actions, use these options:

• icon: "warning": Shows a warning icon.
• buttons: true: Adds a cancel button.
• dangerMode: true: Sets focus to the cancel button and colors the confirm button red.

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
}).then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", { icon: "success" });
  } else {
    swal("Your imaginary file is safe!");
  }
});

Call the swal function after the DOM has loaded. You can pass arguments in several ways:

1. Single string: Shows a simple alert with the string as text.
2. Two strings: The first is the title, the second is the text.
3. Three arguments: The third argument is an icon (one of: "warning", "error", "success", or "info").
4. Options object: Pass a single object to customize multiple properties like title, text, icon, and button.

// Simple alert
swal("Hello world!");

// Title and text
swal("Here's the title!", "...and here's the text!");

// Title, text, and icon
swal("Good job!", "You clicked the button!", "success");

// Using an options object
swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});

Import swal from sweetalert and call it with a string to display a simple alert message.

import swal from 'sweetalert';

swal("Hello world!");

SweetAlert 2.0 introduced breaking changes to improve flexibility. Key changes include:

• Promises over Callbacks: Callback functions are deprecated; use Promises instead.
• Bundled Styles: You no longer need to import an external CSS file; styles are bundled within the .js file.
• String Parameter Behavior: Passing a single string (e.g., swal("Hello")) now sets the modal's text instead of its title.
• Icon Configuration: The type and imageUrl options are replaced by a single icon option (though the shorthand swal("Hi", "Hello", "warning") remains compatible).
• Naming Changes:
  • customClass $\rightarrow$ className
  • allowEscapeKey $\rightarrow$ closeOnEsc
  • allowClickOutside $\rightarrow$ closeOnClickOutside

To use JSX directly within SweetAlert, install the @sweetalert/with-react package alongside sweetalert.

Instead of importing from sweetalert, import from @sweetalert/with-react. This allows you to pass JSX directly to the swal() function or the content option, replacing the need for manual DOM node manipulation.

import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  <div>
    <h1>Hello world!</h1>
    <p>This is now rendered with JSX!</p>
  </div>
)

Install the sweetalert package via npm to use it in your JavaScript project.

$ npm install --save sweetalert

To use SweetAlert with React components, install the @sweetalert/with-react package. This allows you to pass JSX directly into the swal function.

import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  <div>
    <h1>Hello world!</h1>
    <p>
      This is now rendered with JSX!
    </p>
  </div>
)

You can install SweetAlert using a package manager or include it directly via a CDN.

NPM/Yarn (Recommended)

Use NPM or Yarn along with a bundler like Webpack or Browserify.

npm install sweetalert --save

Then import it into your application:

import swal from 'sweetalert';

CDN

You can use the global swal variable by including the script from unpkg or jsDelivr.