타입스크립트 :이쁜 alert 모달창 sweetalert 사용하기

 

SweetAlert2

 

 

1. VS code 패키지 설치 

yarn add sweetalert

 

2. import 하기

import swal from 'sweetalert';

 

3. 삭제 확인 창

const removeHandler = async (e: React.MouseEvent<HTMLButtonElement>, id: string) => {

        try {

            swal({

                title: '삭제하시겠습니까?',

                text: '삭제된 데이터는 복구할 수 없습니다.',

                icon: 'warning',

                buttons: ['취소', '확인'],

                dangerMode: true,

            }).then((willDelete) => {

                if (willDelete) {

                    swal('삭제되었습니다.', {

                        icon: 'success',

                    });

                    mutationDelete.mutate(id);

                }

            });

        } catch (error) {

            console.log('삭제 오류', error);

        }

    };

1)  변경 사항 : buttons: ['취소','확인']으로 변경

(기존) buttons: true

이렇게 다양하게 선택해서 사용할 수 있음.

 

끝.