SweetAlert2（SweetAlert 的高级版）

Sweet Alert 用于使警报框更具吸引力且更易于设计。 sweet JS 通过调用sweet alert函数（简称SWAL()），提供了简单的方法来设计和添加很多功能到网站的alert box。

它是 JavaScript 确认消息的漂亮替代品！它将用漂亮的可定制且功能齐全的模式取代丑陋的确认消息。
SweetAlert 2 是 sweetAlert 的进步。SweetAlert2 也支持 HTML 内容，而前者不支持。
需要安装一个独立的依赖项才能使用 SweetAlert2。

句法：

function SweetAlert2() {
    const fireAlert = () => {
        Swal.fire({
            ...
        }
        ).then((result) => {
           ...
        })
    }
}

让我们构建一个 react 项目并展示 sweetAlert2 的工作原理

要构建一个反应应用程序，请按照以下步骤操作：

第 1 步：使用以下命令创建一个反应应用程序

npx create-react-app foldername

第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序

cd foldername

第 3 步：安装所需的依赖项

npm install sweetalert2

运行应用程序的步骤：输入以下命令运行应用程序。

npm start

项目结构：项目应如下所示：

示例 1：在此示例中，我们将简单地显示 sweetAlert2。成功时会显示一条消息“很高兴认识你”，取消时会显示“已取消”。在 App.js 中编写以下代码

Javascript

import React from 'react'
import Swal from 'sweetalert2'
import { useState } from 'react'
function SweetAlert2() {
    const fireAlert = () => {
        Swal.fire({
            title: 'I am Sweet Alert 2.',
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "OK",
            cancelButtonText: "Cancel",
            icon: 'warning'
        }
        ).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
  
                Swal.fire('Nice to meet you', '', 'success');
  
            } else
                Swal.fire(' Cancelled', '', 'error')
  
        })
    }
    return (
        

            
  
                
                    Click me to see Sweet Alert 2
                 
            
        
    )
}
  
export default function App() {
    return (
        

            

                GeeksforGeeks
            
            
SweetAlert2 in React
            
        
    );
}

输出：

示例 2：在此示例中，我们将显示一个计数器。将弹出一个警报，要求增加计数器的值。

Javascript

import React from 'react'
import Swal from 'sweetalert2'
import { useState } from 'react'
function SweetAlert2() {
    const [counter, setCounter] = useState(0);
    const fireAlert = () => {
        Swal.fire({
            title: 'I am Sweet Alert 2.',
            html: '
 Can I increase counter ?
',
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "Yes Increase",
            cancelButtonText: "Cancel",
            icon: 'warning'
        }
        ).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                setCounter(counter + 1)
                Swal.fire('Counter Value Increased', '', 'success');
  
            } else
                Swal.fire(' Cancelled', '', 'error')
        })
    }
    return (
        

            
                


                 Counter Value:   
                

                    {counter}
                
                


                


                
                    Click me to see Sweet Alert 2
                
            
        
    )
}
  
export default function App() {
    return (
        

            

                GeeksforGeeks
            
            
SweetAlert2 in React
            
        
    );
}

输出：