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
|
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
