[React.js] react-toastify 란? / 사용법

👉 react-toastify 란?

react 프로젝트에서 예쁜알람을 만들 수 있도록 해주는 Node.js 패키지

 

react-toastify 사용 결과

 

react-toastify 설치

npm i react-toastify

 

👉 react-toastify 사용법

// App.js

// 모듈 불러오기
import { toast, ToastContainer } from "react-toastify"

export default function App () {
  // toastify 알람 실행 함수 만들기
  const notify = () => toast("Toastify Alert!")
  
  // 버튼 클릭시 notify 함수 실행하기
  // 알람 실행시 표시될 컨테이너 넣어주기
  return <div>
    <button onClick={notify}
    <ToastContainer/>
  </div>
}

 

다양한 알람 사용하기

// 성공 알람 ( 초록색 창 )
const success = () => toast.success("Success!");

// 실패 알람 ( 빨간색 창 )
const error = () => toast.error("Error!");

// 경고 알람 ( 노란색 창 )
const warning = () => toast.warning("Warnning!");

// 정보 알람
const info = () => toast.info("Info...");

 

알람 세부 설정하기

 

1. 컨테이너에서 설정하기

<ToastContainer
  position="top-center"
  pauseOnFocusLoss
  draggable
  pauseOnHover
/>

 

2. toast 함수에서 설정하기

const notify = () => toast("Notify!", { position:"top-center" })

 

세부 설정 옵션

이름	기능	세부 옵션	기본 값
position	알람 위치 지정	"top-left", "top-right", "top-center",  "bottom-left", "bottom-right", "bottom-center"	"top-right"
autoClose	자동 off 시간	1 이상의 숫자 ( 1000 = 1초 )	{3000}
hideProgressBar	진행 시간 바 숨김	{true} (숨김), {false} (표시)	{false}
newestOnTop	새로운 알람 위치 설정	{true} (위쪽), {false} (아래쪽)	{false}
closeOnClick	클릭으로 알람 off	{true} (끄기), {false} (끄지 않기)	{false}
rtl	알람 좌우 반전	{true} (반전), {false} (반전 안함)	{false}
pauseOnFocusLoss	화면 벗어나면 알람 정지	{true} (정지), {false} (정지 안함)	{true}
draggable	드래그 가능	{true} (가능), {false} (불가능)	{false}
pauseOnHover	마우스 올리면 알람 정지	{true} (정지), {false} (정지 안함)	{true}
transition	알람 애니메이션 지정	Slide, Bounce, Zoom, Flip ( 모듈 import 필요 )	{Bounce}
limit	알람 개수 제한	1 이상의 숫자 ( 1 = 1개 )	제한 없음

---

👉 react-toastify 스타일 바꾸기

// css 파일
:root {
  /* 테마별 색상 바꾸기 */
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  /* 테마별 아이콘 색상 바꾸기 */
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  /* 기본 적용 스타일 바꾸기 */
  --toastify-toast-width: 320px;
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;

  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  //Used only for colored theme
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;

  // Used when no type is provided
  // toast("**hello**")
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  // Used when no type is provided
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
}