Package Exports

cy-toast
cy-toast/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cy-toast) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📜 cy-toast

코드잇 중급 프로젝트용 toast/snackbar 라이브러리 패키지입니다.

✨ Features

headless ui로 자유로운 커스터마이징 제공
React 기반 lightweight toast 시스템
open/close 애니메이션을 위한 상태 값 제공
각 Toast의 순서를 기반으로 애니메이션 커스터마이징 가능
수동/자동 닫기 지원 (duration=0으로 무한 지속 가능)

💡 Install

npm install cy-toast

🔨 Usage

1. ToastRender 루트 컴포넌트 등록

// RootLayout.tsx or toast 사용할 컴포넌트에 ToastRender 컴포넌트 등록
import { ToastRender } from 'cy-toast';

const TestComponent = () => {
  return (
    <ToastRender/> {/*ToastRender 컴포넌트 추가*/}
    <Page/>
  )
}

2. 토스트 사용 (기본 텍스트)

import { toast } from 'cy-toast';

toast.run(
  ({ close }) => (
    <div className="toast">
      저장되었습니다! <button onClick={close}>닫기</button>
    </div>
  ),
  { duration: 3000 }
);

3. 토스트 사용 (사용자 정의 컴포넌트)

import { toast } from 'cy-toast';
import clsx from 'clsx';

toast.run(
  ({ close, isClosing, isOpening, index }) => (
    <div
      className={clsx(
        'toast-base',
        isClosing &&
          index < 3 &&
          'animation-slide-down-out pointer-events-none',
        isOpening && 'animation-slide-down-in',
        index === 1 && 'translate-y-[10px] scale-90',
        index === 2 && 'translate-y-[15px] scale-80',
        index >= 3 && 'translate-y-[20px] scale-70 opacity-0'
      )}
    >
      <Icon />내 위키 링크가 복사되었습니다.
      <button onClick={close}>닫기</button>
    </div>
  ),
  { duration: 10000 }
);

🚀 API

매개변수	타입	설명
`content`	`(context: ToastContext) => React.ReactNode`	표시할 토스트 JSX를 반환하는 함수
`options`	`{ duration?: number; closeDuration?: number; openDuration?: number }`	애니메이션 및 유지 시간 옵션 (`0` 지정 시 자동 종료 없음)

🧩 ToastContext 타입 토스트 컨텐츠에 전달되는 객체는 다음과 같은 구조입니다.

interface ToastContext {
  close: () => void; // 수동 닫기 함수
  isClosing: boolean; // 닫히는 중 여부 (true면 닫히는 애니메이션)
  isOpening: boolean; // 열리는 중 여부 (true면 열리는 애니메이션)
  index: number; // 토스트 표시 순서 (최신이 0)
}

🧪 예제

toast.run(({ close, isOpening, isClosing, index }) => (
  <div
    className={clsx(
      'toast-base',
      isOpening && 'fade-in',
      isClosing && 'fade-out',
      index === 1 && 'translate-y-[10px]',
      index >= 2 && 'translate-y-[20px] opacity-80'
    )}
  >
    토스트 메시지입니다!
    <button onClick={close}>닫기</button>
  </div>
));