Introduction

In this article, we will learn how to use sweetalert2 in ReactJS Application.sweetalert2 to display an alert message.
Prerequisites
  • Basic Knowledge of ReactJS
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap

Create a React.js Project

To create a new ReactJS project, open the command prompt and enter the following command.
  1. npx create-reactp-reduxapp
Open this project in Visual Studio Code and install Bootstrap by using the following command.
  1. npm install bootstrap --save
Now, open the index.js file and add import Bootstrap.
  1. import 'bootstrap/dist/css/bootstrap.min.css';
Install sweetalert2
Now install sweetalert2 by using the following command.
  1. npm install --save sweetalert2 sweetalert2-react-content
Now go to src folder and add a new component.
  • Sweetalertdemo.js
Now, open the Sweetalertdemo.js file and add the following code.
  1. import React, { Component } from "react";
  2. import Swal from "sweetalert2";
  4. export default class Sweetalertdemo extends Component {
  6. constructor() {
  7. super();
  8. this.HandleClick = this.HandleClick.bind(this);
  9. }
  11. HandleClick() {
  12. Swal.fire({
  13. title: 'Success',
  14. type: 'success',
  15. text: 'Your work has been saved.',
  16. });
  17. }
  18. HandleClick1() {
  19. Swal.fire({
  20. title: 'Are you sure?',
  21. text: 'User will have Admin Privileges',
  22. icon: 'warning',
  23. showCancelButton: true,
  24. confirmButtonColor: '#3085d6',
  25. cancelButtonColor: '#d33',
  26. confirmButtonText: 'Yes!'
  27. });
  28. }
  29. HandleClick12() {
  30. Swal.fire({
  31. icon: 'error',
  32. title: 'Oops...',
  33. text: 'Something went wrong!',
  34. footer: '<a href>Why do I have this issue?</a>'
  35. });
  36. }
  37. HandleClicktop() {
  38. Swal.fire({
  39. position: 'top-end',
  40. icon: 'success',
  41. title: 'Your work has been saved',
  42. showConfirmButton: false,
  43. timer: 1500
  44. });
  45. }
  46. HandleClickAutoclose() {
  47. let timerInterval
  48. Swal.fire({
  49. title: 'Auto close alert!',
  50. html: 'I will close in <b></b> milliseconds.',
  51. timer: 1000,
  52. timerProgressBar: true,
  53. onBeforeOpen: () => {
  54. Swal.showLoading()
  55. timerInterval = setInterval(() => {
  56. const content = Swal.getContent()
  57. if (content) {
  58. const b = content.querySelector('b')
  59. if (b) {
  60. b.textContent = Swal.getTimerLeft()
  61. }
  62. }
  63. }, 100)
  64. },
  65. onClose: () => {
  66. clearInterval(timerInterval)
  67. }
  68. }).then((result) => {
  69. if (result.dismiss === Swal.DismissReason.timer) {
  70. console.log('I was closed by the timer')
  71. }
  72. })
  73. }
  76. render() {
  77. return (
  78. <div>
  79. <div class="row" className="hdr">
  80. <div class="col-sm-12 btn btn-info">
  81. SweetAlert2 In React
  83. </div>
  84. </div>
  85. <div style={{ "paddingTop": "10px" }}>
  86. <button class="btn btn-info btn" onClick={this.HandleClick}>Success</button>
  87. <button class="btn btn-success btn" onClick={this.HandleClick1}>Confirm</button>
  88. <button class="btn btn-primary btn" onClick={this.HandleClick12}>Confirm Box</button>
  89. <button class="btn btn-primary btn" onClick={this.HandleClicktop}>Top Side</button>
  90. <button class="btn btn-primary btn" onClick={this.HandleClickAutoclose}>Auto Close</button>
  92. </div>
  93. </div>
  94. );
  95. }
  96. }
Open app.css file, add the following css.
  1. .btn
  2. {margin-right: 10px;margin-left: 10px}
Open the App.js file and add the following code.
  1. import React from 'react';
  2. import './App.css';
  3. import Sweetalertdemo from './Sweetalertdemo'
  4. function App() {
  5. return (
  6. <div className="App">
  7. <Sweetalertdemo/>
  8. </div>
  9. );
  10. }
  12. export default App;
Now, run the project by using 'npm start' command and check the result.
How To Use Sweetalert2 in React Application
How To Use Sweetalert2 in React Application
How To Use Sweetalert2 in React Application

Summary


In this article, we learned how to use sweetalert2 in ReactJS applications.sweetalert2 to display an alert message.