Toast

@hua-labs/ui

v1.1.0

다양한 타입, 자동 닫힘, 액션을 지원하는 임시 알림 메시지입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useToast } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

Toast 타입

제목 포함

액션 버튼

커스텀 지속시간

Toast Options

Props

이름	타입	기본값	설명
`type*`	`"success" \| "error" \| "warning" \| "info"`	-	Toast 타입 (색상과 아이콘 결정)
`message*`	`string`	-	Toast 메시지 내용
`title`	`string`	-	메시지 위에 표시되는 선택적 제목
`duration`	`number`	`5000`	자동 닫힘 시간 (ms), 0이면 자동 닫힘 없음
`action`	`{ label: string; onClick: () => void }`	-	선택적 액션 버튼

ToastProvider Props

Props

이름	타입	기본값	설명
`maxToasts`	`number`	`5`	표시되는 최대 Toast 수
`position`	`"top-right" \| "top-left" \| "bottom-right" \| "bottom-left" \| "top-center" \| "bottom-center"`	`"top-right"`	Toast 컨테이너 위치

코드 예시

기본 사용법tsx

1// 1. Wrap your app with ToastProvider
2// Via framework (recommended)
3import { ToastProvider } from '@hua-labs/ui';
4// Or direct import
5// import { ToastProvider } from '@hua-labs/ui/interactive';
6 
7<ToastProvider>
8  <App />
9</ToastProvider>
10 
11// 2. Use the hook in any component
12import { useToast } from '@hua-labs/ui';
13function MyComponent() {
14  const { addToast } = useToast();
15 
16  return (
17    <Button onClick={() => addToast({
18      type: "success",
19      message: "Operation completed!"
20    })}>
21      Show Toast
22    </Button>
23  );
24}

제목 포함tsx

1addToast({
2  type: "info",
3  title: "New Update",
4  message: "A new version is available.",
5  duration: 8000
6});

편의 함수tsx

1import { useToast } from '@hua-labs/ui';
2 
3const { showToast, showSuccessToast, showErrorToast } = useToast();
4 
5// Quick helpers
6showSuccessToast("Saved successfully!");
7showErrorToast("Something went wrong.");
8showToast("info", "New update available.");

액션 버튼tsx

1addToast({
2  type: "warning",
3  message: "Your session will expire soon.",
4  action: {
5    label: "docs:components.toast.accessibility.extend",
6    onClick: () => extendSession()
7  }
8});

Provider Required

Toast requires ToastProvider to be wrapped around your app. In this documentation site, it's already configured in the root layout.

접근성

•역할: 중요한 메시지에 role='alert' 사용
•자동 닫힘: 설정 가능한 지속 시간, 0이면 영구 표시
•키보드: 닫기 버튼 포커스 및 접근 가능

Tooltip Menu