Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

React.js SweetAlert2 Example to Show Popup Toast & Alert Messages in Browser Using Javascript

Posted on March 25, 2023

 

 

Welcome folks today in this blog post we will be showing the popup toast and alert messages in browser using react.js in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new react.js app using the below command

 

 

npx create-react-app sampleapp

 

 

cd sampleapp

 

 

And after that you need to install the below library using the npm command as shown below

 

 

npm i sweetalert2

 

 

And after that you will see the below directory structure of the react.js project as shown below

 

 

 

 

 

And now we need to copy paste the below code inside the App.js code as shown below

 

 

App.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React from 'react';
import Swal from 'sweetalert2';
 
function App() {
  const handleAlertClick = () => {
    Swal.fire('This is an alert dialog box!');
  };
 
  const handleConfirmClick = () => {
    Swal.fire({
      title: 'Are you sure?',
      text: 'You won\'t be able to revert this!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel!',
      reverseButtons: true
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
      } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal.fire('Cancelled', 'Your file is safe :)', 'error');
      }
    });
  };
 
  const handlePromptClick = () => {
    Swal.fire({
      title: 'Enter your name',
      input: 'text',
      inputLabel: 'Name',
      inputPlaceholder: 'Enter your name',
      showCancelButton: true,
      inputValidator: (value) => {
        if (!value) {
          return 'You need to enter a name!';
        }
      }
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(`Hello ${result.value}!`);
      }
    });
  };
 
  const handleSuccessClick = () => {
    Swal.fire('Success!', 'Your action has been completed.', 'success');
  };
 
  const handleErrorClick = () => {
    Swal.fire('Error!', 'Something went wrong.', 'error');
  };
 
  const handleWarningClick = () => {
    Swal.fire('Warning!', 'Please be careful.', 'warning');
  };
 
  const handleInfoClick = () => {
    Swal.fire('Info!', 'This is an informative message.', 'info');
  };
 
  const handleQuestionClick = () => {
    Swal.fire({
      title: 'Are you sure?',
      text: 'Do you want to continue?',
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Yes',
      cancelButtonText: 'No'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('Confirmed!', 'You have clicked Yes.', 'success');
      } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal.fire('Cancelled', 'You have clicked No.', 'error');
      }
    });
  };
 
  return (
    <div>
      <h1>SweetAlert2 Dialog Box Examples</h1>
      <button onClick={handleAlertClick}>Alert Dialog</button>
      <button onClick={handleConfirmClick}>Confirm Dialog</button>
      <button onClick={handlePromptClick}>Prompt Dialog</button>
      <button onClick={handleSuccessClick}>Success Dialog</button>
      <button onClick={handleErrorClick}>Error Dialog</button>
      <button onClick={handleWarningClick}>Warning Dialog</button>
      <button onClick={handleInfoClick}>Info Dialog</button>
      <button onClick={handleQuestionClick}>Question Dialog</button>
    </div>
  );
}
 
export default App;

 

 

As you can see we are importing the sweetalert2 library at the top and then we are showing the buttons where we are showing all the popup alert messages supported by sweetalert2 library. And then we are defining the functions whenever we hit the button. And we are using the Swal.fire() method to display the popup messages as shown below

 

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme