[Javascript/React] sweetalert & sweetalert2

 

Javascript 알림창을 대체하는 alert 라이브러리.

알림창을 띄울 때 간편하게 커스터마이징을 할 수 있다.

 

sweetalert

공식 사이트에서 사용법과 각종 alert 예시들을 볼 수 있다.

 

sweetalert2

버전 2 역시 공식 사이트에서 사용법과 다양한 예시들을 참고하기 좋다.

 

설치하기

# sweetalert
npm install sweetalert
yarn add sweetalert

# sweetalert2
npm install sweetalert2
yarn add sweetalert2

 

import 하기

// sweetalert
import swal from 'sweetalert';


// sweetalert2
import Swal from 'sweetalert2' // ES6 Modules or TypeScript

const Swal = require('sweetalert2') // CommonJS

// JS와 CSS를 별도로 가져오기
import Swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'

 

 

사용 예시

alert 대신 swal/Swal.fire로 변경하여 사용한다.

 

sweetalert1

swal("Hello world!");

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});

 

sweetalert2

Swal.fire('Any fool can use a computer')

Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)