Toast

화면 하단에 잠시 표시되는 알림 컴포넌트입니다. 3초 후 자동으로 닫힙니다.

TIP

Toast는 반드시 framer-motion의 AnimatePresence로 감싸야 진입/퇴장 애니메이션이 동작합니다.

사용법

import { useState } from 'react'
import { AnimatePresence } from 'framer-motion'
import { Toast, Button } from '@coldsurfers/ocean-road'

function MyPage() {
  const [show, setShow] = useState(false)

  return (
    <>
      <Button onClick={() => setShow(true)}>토스트 표시</Button>
      <AnimatePresence>
        {show && (
          <Toast
            message="저장되었습니다."
            onClose={() => setShow(false)}
          />
        )}
      </AnimatePresence>
    </>
  )
}

Props

prop 타입 필수 기본값 설명
message string 표시할 메시지 텍스트
onClose () => void 3초 경과 또는 클릭 시 호출되는 콜백
zIndex number 99 z-index 값

인터랙티브 데모