Toast
의미형 variant, action, queue, anchor 배치, 접근 가능한 lifecycle을 지원하는 일시적 상태 알림이에요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | neutral, info, success, warning, danger | 의미형 toast type, 그 외에는 neutral |
position | block start/end × inline start/center/end | block-end-inline-end |
| lifecycle | add, update/upsert, promise, timeout, 하나/전체 dismiss, queue limit | provider 관리 |
| 접근성 | polite live region, high-priority alert, F6 탐색, Escape 닫기, focus 복원 | Base UI 관리 |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/toast.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRToast, useToastManager } from '@tinyrack/ui/components/toast';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
preview가 toast manager lifecycle을 소유해요. Reset은 provider를 다시 mount해 preview notification을 비우고, 조절할 수 있는 값은 content, position, semantic variant뿐이에요.
사용법
예시
상태 variant 고유 링크
실제 manager를 통해 의미형 상태 색상을 표시해요.
논리 viewport 위치 고유 링크
여섯 논리 위치가 LTR과 RTL layout에 맞게 동작해요.
Action, update, promise, queue, timeout 고유 링크
제자리 update, promise 상태 매핑, dismiss, provider limit 2를 확인해요.
Anchor, positioner, arrow 고유 링크
Anchor 알림도 label이 있는 Viewport 안에 두어 live-region과 focus 동작을 유지해요.
API
TRToast는 Provider, Portal, Viewport, Root, Content, Title, Description, Action, Close, Positioner, Arrow를 포함해요. createToastManager와 useToastManager도 제공하며 named helper export로도 사용할 수 있어요.
Provider는 timeout, limit, global toastManager를 받아요. useToastManager는 reactive toasts와 add, update, close, promise를 반환해요. add에는 title, description, 의미형 type, timeout, priority, callback, actionProps, custom data, anchor positionerProps를 전달할 수 있어요. 같은 id를 다시 쓰면 기존 toast를 update해요. close(id)는 하나를, close()는 전체를 닫아요.
Stacked와 anchored notification을 함께 쓸 때는 별도 provider로 분리하세요. 동시에 표시하는 각 Viewport에는 고유한 aria-label을 지정하세요. Base UI는 timer, queue, swipe dismiss, F6 focus 진입/복원, Escape dismiss, portal, polite/high-priority live announcement를 담당하고 Tinyrack은 variant, token, layout, motion을 담당해요.