React - sweetalert example

3 points
Created by:

In this article, we would like to show you how to create SweetAlert - a customizable replacement for JavaScript's popup boxes. 

Sweetalert example
Sweetalert example

The first step is to install sweetalert2 package using npm:

$ npm install sweetalert2

Or grab from CDN: 

<script src="//"></script>

Quick solution: 

import Swal from 'sweetalert2''Alert text')

// or an example from the picture above 'Good job!','You clicked the button','success');

Below an example with different types of alerts:

  • success alert,
  • question alert,
  • and alert with a custom image.


SweetAlert2 includes many more advanced options which you can check out by going here.

Practical example:

import React from 'react'
import Swal from 'sweetalert2'

const successAlert = () => {{  
        title: 'Good job!',  
        text: 'You clicked the button.',
        icon: 'success'

const questionAlert = () => {{  
        title: 'Do you have a problem to solve?!',  
        text: 'Ask us on dirask',
        icon: 'question'

const customImageAlert = () => {{
    text: "your custom image",
    imageUrl: ''

const App = () => {
  return (
      <button onClick={successAlert}>Success Alert</button>
      <button onClick={questionAlert}>Question Alert</button>
      <button onClick={customImageAlert}>Custom image Alert</button>

export default App;

Online runnable example:



  1. Sweetalert2 docs
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.


React - sweetalert example
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂