✏️ toastify & react-hot-toast 라이브러리
사용자가 액션을 취했을 때 성공이나 실패여부를 보여주는 라이브러리는 여러가지가 있다
그 중 `toastify` 라이브러리와 `react-hot-toast` 라이브러리 두개를 소개해 보려고 한다.
1. toastify 라이브러리
toast 라이브러리는 커스텀이 가능하고, 쉽고 직관적이게 설정할 수 있다.
설치
npm install --save react-toastify
//또는
yarn add react-toastify
React에서는 최상위 index.jsx 컴포넌트에 추가한다.
import App from './App.jsx';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/ReactToastify.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<>
<App />
<ToastContainer />
</>
)
next 14v에서는 최상위 layout에 선언해준다.
import "@/app/globals.css";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>
<ToastContainer position="top-left" autoClose={1000} /> {children}
</body>
</html>
);
}
기본속성은 오른쪽 위에 선언되어 있는데
속성값으로 설정해두어 변경할 수 있다.
position 속성
| top-left | 왼쪽 위에 생성 |
| top-right | 오른쪽 위에 생성 (기본값) |
| top-center | 가운데 위로 생성 |
| bottom-left | 왼쪽 아래 생성 |
| bottom-right | 오른쪽 아래 생성 |
| bottom-center | 가운데 아래 생성 |
type 속성
| info |  |
| success |  |
| warning |  |
| error |  |
| default |  |
테마
| light | 기본값 |
| dark |  |
| colored |  |
Docs 에서 직접 확인해 볼 수 있다.
Installation | React-Toastify
Requirements
fkhadra.github.io
react-toastify
React notification made easy. Latest version: 10.0.5, last published: 5 months ago. Start using react-toastify in your project by running `npm i react-toastify`. There are 2566 other projects in the npm registry using react-toastify.
www.npmjs.com
2. react-hot-toast 라이브러리
react-hot-toast도 마찬가지로 쉽고 빠르게 적용해 볼 수 있다.
toastify와 다른점은 커스텀을 할 때 Tailwind CSS 커스텀이 가능하다는 점이 있다.
Tailwind CSS를 사용하고 커스텀을 사용하려고 한다면, hot-toast가 더 적합할 수 있다.
설치
npm install react-hot-toast
//또는
yarn add react-hot-toast
React에서는 최상위 index.jsx 컴포넌트에 추가한다.
import App from './App.jsx';
import toast, { Toaster } from 'react-hot-toast';
ReactDOM.createRoot(document.getElementById('root')).render(
<>
<App />
<Toaster />
</>
)
next 14v에서는 최상위 layout에 선언해준다.
import toast, { Toaster } from "react-hot-toast";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body className={notoSansKr.className}>
{children}
<Toaster />
</body>
</html>
);
}
Docs에서 잘 나와있어서 속성들을 적용해 볼 수 있다.
Docs
react-hot-toast - The Best React Notifications in Town - react-hot-toast
Add beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.
react-hot-toast.com
react-hot-toast
Smoking hot React Notifications. Lightweight, customizable and beautiful by default.. Latest version: 2.4.1, last published: a year ago. Start using react-hot-toast in your project by running `npm i react-hot-toast`. There are 765 other projects in the npm
www.npmjs.com