Toast

알림 메시지를 표시하는 토스트 컴포넌트입니다.

Import


import { ToastProvider, ToastViewport, useToast } from '@choblue/ui/toast'

데모

버튼을 클릭해보세요:

사용법

1. Provider 설정


// app/layout.tsx
import { ToastProvider, ToastViewport } from '@choblue/ui/toast'
 
export default function Layout({ children }) {
  return (
    <ToastProvider>
      {children}
      <ToastViewport />
    </ToastProvider>
  )
}

2. Toast 호출


import { useToast } from '@choblue/ui/toast'
 
function MyComponent() {
  const { toast } = useToast()
 
  return (
    <Button onClick={() => toast({
      title: '성공',
      description: '작업이 완료되었습니다.',
      variant: 'default', // or 'danger'
      duration: 5000,      // ms, default: 5000
    })}>
      토스트 표시
    </Button>
  )
}

useToast API

메서드	타입	설명
`toast`	`(data: ToastData) => { id: string }`	토스트 표시
`dismiss`	`(id: string) => void`	토스트 닫기
`toasts`	`ToastData[]`	현재 토스트 목록

ToastData

필드	타입	기본값	설명
`title`	`string`	-	제목
`description`	`string`	-	설명
`variant`	`'default' \| 'danger'`	`'default'`	스타일
`duration`	`number`	`5000`	자동 닫힘 시간 (ms)