Toast
토스트 메시지 컴포넌트입니다.
import { toast } from 'sud-ui';사용할 때
성공, 오류 등의 피드백을 표시할 때
가벼운 메시지를 표시할 때
사전 설정
Toast를 사용하기 위해서는 Root Layout에 "<ToastRoot />"를 포함해야 합니다.
# 1. Using SoonUIDesign Component
## The SoonUIDesign.jsx component file is written as follows.
## You can use theme system, Toast, and Notification all at once without adding them separately.
"use client";
import { ThemeProvider } from "../theme/ThemeContext";
import { ToastRoot } from "./feedback/ToastRoot";
import { NotificationRoot } from "./feedback/NotificationRoot";
export const SoonUIDesign = ({ children, theme, darkTheme, isDarkMode }) => {
return (
<ThemeProvider theme={theme} darkTheme={darkTheme} isDarkMode={isDarkMode}>
{children}
<ToastRoot />
<NotificationRoot />
</ThemeProvider>
);
};
## Include the SoonUIDesign component in your Root Layout as follows:
"use client";
import { SoonUIDesign } from "sud-ui";
export default function ClientLayout({ children }) {
return (
<SoonUIDesign>
{children}
</SoonUIDesign>
);
}
################################################
# 2. Adding Only ToastRoot
"use client";
import { ToastRoot } from "sud-ui";
export default function ClientLayout({ children }) {
return (
<>
{children}
<ToastRoot />
</>
);
}사용예제
Basic Usage
기본적인 사용방법입니다.
Duration
지속 시간을 설정합니다.
Various Types
다양한 타입의 토스트 메시지를 표시합니다.
Icon Custom
커스텀 아이콘을 설정합니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| type | 토스트 타입 | success | danger | info | warning | info |
| message | 토스트 메시지 | ReactNode | - |
| duration | 토스트 지속 시간 (밀리초) | number | 3000 |
| icon | 커스텀 아이콘 (기본 아이콘 대신 사용) | ReactNode | - |