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.
Open this project in Visual Studio Code and install Bootstrap by using the following command.
- npm install bootstrap --save
Now, open the index.js file and add import Bootstrap.
- import 'bootstrap/dist/css/bootstrap.min.css';
Install sweetalert2
Now install sweetalert2 by using the following command.
- 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.
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Sweetalertdemoexample.js
import React, { Component } from "react";
import Swal from "sweetalert2";
export default class Sweetalertdemoexample extends Component {
constructor() {
super();
this.HandleClick = this.HandleClick.bind(this);
}
HandleClick() {
Swal.fire({
title: 'Success',
type: 'success',
text: 'Your work has been saved.',
});
}
HandleClick1() {
Swal.fire({
title: 'Are you sure?',
text: 'User will have Admin Privileges',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes!'
});
}
HandleClick12() {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
});
}
HandleClicktop() {
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
});
}
HandleClickAutoclose() {
let timerInterval
Swal.fire({
title: 'Auto close alert!',
html: 'I will close in <b></b> milliseconds.',
timer: 1000,
timerProgressBar: true,
onBeforeOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
const content = Swal.getContent()
if (content) {
const b = content.querySelector('b')
if (b) {
b.textContent = Swal.getTimerLeft()
}
}
}, 100)
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log('I was closed by the timer')
}
})
}
render() {
return (
<div>
<div class="row" className="hdr">
<div class="col-sm-12 btn btn-info">
SweetAlert2 example in in React </div>
</div>
<div style={{ "paddingTop": "10px" }}>
<button class="btn btn-info btn" onClick={this.HandleClick}>Success</button>
<button class="btn btn-success btn" onClick={this.HandleClick1}>Confirm</button>
<button class="btn btn-primary btn" onClick={this.HandleClick12}>Confirm Box</button>
<button class="btn btn-primary btn" onClick={this.HandleClicktop}>Top Side</button>
<button class="btn btn-primary btn" onClick={this.HandleClickAutoclose}>Auto Close</button>
</div>
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
App.js
import logo from './logo.svg';
import './App.css';
import Sweetalertdemo from './Sweetalertdemoexample'
function App() {
return (
<div className="App">
<header className="App-header">
<Sweetalertdemo></Sweetalertdemo>
</header>
</div>
);
}
export default App;
Final output :
