리액트 - SweetAlert2로 모달, 팝업 만들기

리액트 전체 링크

 

참고

- https://sweetalert2.github.io/

 

SweetAlert를 이용하면 간단하게 모달과 팝업을 이용할 수 있다.

npm install sweetalert2 --legacy-peer-deps

 

예제는 다음과 같다.

import React from "react";
import Button from "@mui/material/Button";
import Swal from "sweetalert2";

const App = () => {
  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={() =>
          Swal.fire("Good job!", "You clicked the button!", "success")
        }
      >
        Basic
      </Button>
      <Button
        variant="outlined"
        color="secondary"
        onClick={() => {
          Swal.fire("The Internet?", "That thing is still around?", "question");
        }}
      >
        Question
      </Button>
      <Button
        variant="outlined"
        color="error"
        onClick={() => {
          Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Something went wrong!",
            footer: '<a href="">Why do I have this issue?</a>',
          });
        }}
      >
        Error
      </Button>
      <Button
        variant="outlined"
        color="warning"
        onClick={() =>
          Swal.fire({
            title: "Custom animation with Animate.css",
            showClass: {
              popup: "animate__animated animate__fadeInDown",
            },
            hideClass: {
              popup: "animate__animated animate__fadeOutUp",
            },
          })
        }
      >
        Animation
      </Button>
      <Button
        variant="outlined"
        color="info"
        onClick={() =>
          Swal.fire({
            title: "Do you want to save the changes?",
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: "Save",
            denyButtonText: `Don't save`,
          }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
              Swal.fire("Saved!", "", "success");
            } else if (result.isDenied) {
              Swal.fire("Changes are not saved", "", "info");
            }
          })
        }
      >
        Choose
      </Button>
      <Button
        variant="outlined"
        color="success"
        onClick={() =>
          Swal.fire({
            title: "Submit your Github username",
            input: "text",
            inputAttributes: {
              autocapitalize: "off",
            },
            showCancelButton: true,
            confirmButtonText: "Look up",
            showLoaderOnConfirm: true,
            preConfirm: (login) => {
              return fetch(`//api.github.com/users/${login}`)
                .then((response) => {
                  if (!response.ok) {
                    throw new Error(response.statusText);
                  }
                  return response.json();
                })
                .catch((error) => {
                  Swal.showValidationMessage(`Request failed: ${error}`);
                });
            },
            allowOutsideClick: () => !Swal.isLoading(),
          }).then((result) => {
            if (result.isConfirmed) {
              Swal.fire({
                title: `${result.value.login}'s avatar`,
                imageUrl: result.value.avatar_url,
              });
            }
          })
        }
      >
        Fetch
      </Button>
    </div>
  );
};

export default App;

 

여러 상황에 대한 정보를 쉽게 나타낼 수 있다.

 

또한 SweetAlert2로 Open API를 이용해 서버와의 통신 결과에 따라 팝업을 나타내게 하는 것도 가능하다.

위에서 사용된 깃허브의 RESTful API는 다음과 같다.