Implement Sweet Alert In React Js

Your software application can send users wacky and helpful feedback when they’ve completed some action with the aid of Sweet Alert.

Alerts are essential and straightforward pointers that can even be made with Javascript.

alert("hello world!")

The majority of libraries and programming languages can be integrated with Sweet Alert. However, we’ll be adding it to our React application in this tutorial.

You can start using Sweet Alert here if you’ve never done so before.

And for the purposes of this tutorial, we’ll be using a SweetAlert2 variation.

Let’s get going.

install Sweet Alert npm in your application

npm i sweetalert

import Sweet Alert in your application

import swal from 'sweetalert';

you can see below how to use Sweet Alert

import React, { useState } from 'react'
import swal from 'sweetalert';

export default function EmojiCom() {
  const [value, setvalue] = useState()
  const alertToggle = () => {
    swal({
      title: "Are you sure?",
      text: "Are you sure that you want to leave this page?",
      icon: "warning",
      dangerMode: true,
    })
  }
  return (
    <>
      <button onClick={() => alertToggle()}>click here to open alert</button>
    </>

  )
}

you can see below output