Alert창 이쁜 라이브러리 추천 - SweetAlert2

 

 

 

 

 

 

 

웹 개발을 하다 보면 사용자에게 알림 창으로 필요한 정보를 알려줘야 할 경우가 자주 발생한다.

 

그래서 보통은 이러한 alert창이나 modal을 이쁘게 디자인하여 사용자에게 보여준다.

 

디자인 및 기능구현에 있어 생각보다 시간이 소요되는데 간편하고 이쁜 alert 라이브러리를 알게 되었다.

 

심플하게 사용할 수 있으면서 엄청 이쁘다! 심지어 애니메이션도 구성할 수 있다! 공식문서를 보면 테마도 추가할 수 있다. 최신 업데이트도 빠른 거 같고 매달 다운로드 수도 200만이 넘어간다.

 

 

 

 

 

공식문서도 엄청 이쁘고 설명을 잘 써놨으므로 꼭 공식문서를 보는 것을 추천한다.

 

아래는 유명한 블로그에서 예시를 만들어놔서 가져와보았다. 꼭 이 분 블로그 들어가보시길!

 

SweetAlert2

 

 

다운로드 및 설치

$ npm install sweetalert2

 

사용방법

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

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

 

활용방법

// 기본 메세지
Swal.fire('Any fool can use a computer')

// 제목과 내용이 있는 메세지(애니메이션)
Swal.fire(
  'The Internet?',
  'That thing is still around?',
  'question'
)

// 자동 닫기 타이머가 있는 메세지
let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <b></b> milliseconds.',
  timer: 2000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading()
    const b = Swal.getHtmlContainer().querySelector('b')
    timerInterval = setInterval(() => {
      b.textContent = Swal.getTimerLeft()
    }, 100)
  },
  willClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  /* Read more about handling dismissals below */
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('I was closed by the timer')
  }
})

// ajax 요청이 있는 메세지

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
    })
  }
})

 

 

---

 

SweetAlert2

 

🎨 SweetAlert2 - 이쁜 alert 모달창 설치 & 사용법