[리액트] react-toastify 사용하기 / 알림창 띄우기

 

[React_ react-toastify]

 

react-toastify 사용법에 대해 알아보자

 

---

 

<STUDY>

 

웹사이트를 개발하다 보면 잠깐 경고창이 생겼다가 사라지는 toast를 띄우야 하는 경우가 있다.

 

직접 구현하는 방법으로는 setTimeout와 state를 사용하여 직접 커스텀하는 방법이 있다.

 

이번 포스팅에서는 react-toastfy 라는 라이브러리를 사용하는 방법에 대해 알아볼 것이다.

 

 

1. 라이브러리 설치

npm install react-toastify

 

 

2. 코드 삽입

import { toast, ToastContainer } from 'react-toastify';

export default function App() {
  const success = () => toast.success('성공!');
  
  return(
    <ToastContainer
      position="top-center"
      autoClose={1500}
    />
  )
};

 

   💡 toast를 정의한 후 띄우고 싶은 부분에 넣어주면 된다.

      ❕position : 띄울 위치 (top-center, top-left, top-right, bottom-center, bottom-left, bottom-right)

      ❕ autoClose : 시간 (1000 = 1초)

 

      ❔알람 종류

// 기본
const default_ = () => toast.default('Default!');

// 성공
const success = () => toast.success('Success!');

// 실패
const error = () => toast.error('Error!');

// 경고
const warning = () => toast.warning('Warnning!');

// 정보
const info = () => toast.info('Infomatoin');

 

 

<자세한 내용은 공식 홈페이지를 참고해 주세요.>

 

React-toastify | React-Toastify

 

 

---

 

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview