SweetAlert

What is the SweetAlert?

SweetAlert is a method to customize alerts in your applications, websites and games. It allows the user to change it with a standard JavaScript button. You can add a new button to it, change the background color of the button, change the button's text, and add additional alerts that depend on the user's click. You can also put the icons with your alerts message in it.

SweetAlert is a replacement for the "window.alert()" function of JavaScript that shows wonderful modal popup windows. It is a standalone library with no dependencies and is composed of a JavaScript file plus a CSS file.

Installation of SweetAlert

NPM is the recommended method of installing SweetAlert in conjunction with tools such as BrowserWise or Webpack.

Then, just import it into your project and application:

You can also get a CDN link for the latest version of the library and include it in your webpage using script tags:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>

In addition to the JavaScript file, you must also load a CSS file, which is used to design all the alert boxes created by the library:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'></link>

Once the library is set up, creating a SweetAlert message is very easy. All you have to do is call the swal() function.

Examples of sweetalert

Basic example

1. Simple message alert

2. If you pass two arguments to the swal() function, the first will be the title of the model, and the second is the text of the model, shown below

Error and success message

Customize confirm button

You can choose a lot of options to configure your alert code. For example, you can change the text on the confirmation button.

swal({
  title: " Oops!",
  text: " Something went wrong, you should choose again!",
  icon: "error",
  button: "oh no!",
});

swal({
  title: "Good job!",
  text: "Click!",
  icon: "success",
  button: "oh yes!",
});

swal("Are you sure you want to do this?", {
  buttons: ["oh no!", "oh yes!"],
});

An alert message with a function attached to the "Confirm" button and "cancel" button.

swal({
  title: " Confirm?",
  text: "Imaginary file",
  type: "alert message",
  showCancelButton: true,
  confirmButtonClass: "btn-danger",
  confirmButtonText: " Confirm, remove it!",
  closeOnConfirm: false
},
function(){
  swal("remove it!", "Imaginary file remove it.", "Confirm");
});

swal({
  title: " Confirm?",
  text: "Imaginary file!",
  type: "warning message",
  showCancelButton: true,
  confirmButtonClass: "btn-danger",
  confirmButtonText: " Confirm, remove it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm) {
  if (isConfirm) {
    swal("remove it!", "Imaginary file remove!", "Confirm");
  } else {
    swal("Cancelled", "Imaginary file safe!)", "something is worng");
  }
});

An alert message with the customize icon.

swal({
  title: "Sweet message!",
  text: "customize image",
  imageUrl: 'image.jpg'
});

A replacement of the "prompt" function

swal({
  title: "Add input!",
  text: "Some text add:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  inputPlaceholder: "Write text"
}, function (inputValue) {
  if (inputValue === false) return false;
  if (inputValue === "") {
    swal.showInputError("Some need to write!");
    return false
  }
  swal("GOOD!", "You wrote: " + inputValue, "confirm success");
});

swal() function with a loader gif button (for a AJAX requests)

swal({
  title: "request to AJAX button",
  text: "Confirm button",
  type: "info",
  showCancelButton: true.,
  closeOnConfirm: false.
  showLoaderOnConfirm: true
}, function () {
  setTimeout(function () {
    swal("request of AJAX is confirm!");
  }, 3000);
});

Using React

With JSX syntax, if you are using SweetAlert, you will need to install React.

After that, it is very easy to import SweetAlert.

Import.React from 'react'
Import.swal from '@sweetalert/with-react'

swal(
  <div>
    <h1>JAVA T POINT!</h1>
    <p>
      Rendered with JSX!
    </p>
  </div>
)

The JSX syntax changes the model's content option, so you can still use other features of SweetAlert.

Import.React from 'react'
Import.swal from '@sweetalert/with-react'.

const onPick = value => {
  swal("Please feedback!", `feedback ${value}/3`, "confirm")
}
 
const MoodButton = ({ feedback, onClick }) => (
  <button 
    data-rating={feedback}
    className="mood-btn" 
    onClick={() => onClick(feedback)}
  />
)
 
swal({
  text: "Please share your experience?",
  buttons: {
    cancel: "Close",
  },
  content: (
    <div>
      <MoodButton 
        rating={1} 
        onClick={onPick}
      />
      <MoodButton 
        rating={2} 
        onClick={onPick}
      />
      <MoodButton 
        rating={3} 
        onClick={onPick}
      />
    </div>
  )
})

Next TopicTypes of Rocks

← prev next →