react-hot-toast: React의 토스트 메시지 라이브러리

📌 react-hot-toast

: React에서 사용하는 토스트 메시지 라이브러리

react-hot-toast - The Best React Notifications in Town - react-hot-toast

 

 

 

✨ 토스트 메시지(Toast Message)

: 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소

• 토스트처럼 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 자동으로 사라진다.
• 보통 정보나 작업 결과를 사용자에게 간단하게 알려줄 때 사용한다.

 

 

 

⏩ 설치

pnpm add react-hot-toast

 

 

 

✅ 사용

1. Toaster 컴포넌트 추가 

import toast, { Toaster } from 'react-hot-toast';

const App = () => {
  return (
    <div>
      <Toaster />
    </div>
  );
};

 

 

2. 토스트 호출

• 필요한 곳에서 토스트를 호출

toast("Hello World")

 

 

 

 

☑️ 토스트 타입

 

기본 토스트

toast('This is a basic toast!');

 

 

성공 토스트

toast.success('Success message!');

 

 

오류 토스트

toast.error('Error message!');

 

 

커스텀 스타일 토스트

toast('Custom styled toast!', { icon: '👏', });

 

 

 

 

☑️ 옵션 설정

• 스타일, 위치, 방향 등을 설정할 수 있다.

 

style / iconTheme

 

 

Position / Toggle

 

---

 

react-hot-toast - The Best React Notifications in Town - react-hot-toast