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

728x90
반응형

 

 

SweetAlert2

SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

sweetalert2.github.io

 

 

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

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

 

끝.

반응형