Toast

() => {
  const [open, setOpen] = React.useState(false)
  const eventDateRef = React.useRef(new Date())
  const timerRef = React.useRef(0)

  React.useEffect(() => {
    return () => clearTimeout(timerRef.current)
  }, [])

  return (
    <ToastProvider swipeDirection='right'>
      <Button
        onClick={() => {
          setOpen(false)
          window.clearTimeout(timerRef.current)
          timerRef.current = window.setTimeout(() => {
            setOpen(true)
          }, 100)
        }}
      >
        Add to calendar
      </Button>

      <Toast className='ToastRoot asd' open={open} onOpenChange={setOpen}>
        <ToastTitle className='ToastTitle'>Scheduled: Catch up</ToastTitle>
        <ToastDescription asChild>
					<div>
						2025-02-28 15:50:30
					</div>
        </ToastDescription>
        <ToastAction
          asChild
          altText='Goto schedule to undo'
        >
          <Button size={'1'} variant='soft'>
            Undo
          </Button>
        </ToastAction>
      </Toast>
      <ToastViewport className='ToastViewport' />
    </ToastProvider>
  )
}

<Toast.Provider>
	{/* ... */}
	<Toast.Viewport hotkey={["altKey", "KeyT"]} />
</Toast.Provider>

<Toast.Root duration={3000}>
	<Toast.Description>저장되었습니다!</Toast.Description>
</Toast.Root>

export default () => {
	const [savedCount, setSavedCount] = React.useState(0);

	return (
		<div>
			<form onSubmit={() => setSavedCount((count) => count + 1)}>
				{/* ... */}
				<button>저장</button>
			</form>

			{Array.from({ length: savedCount }).map((_, index) => (
				<Toast.Root key={index}>
					<Toast.Description>저장되었습니다!</Toast.Description>
				</Toast.Root>
			))}
		</div>
	);
};

// index.jsx
import { Toast } from "@confy-ui/react/primitives";
import "./styles.css";

export default () => (
	<Toast.Provider swipeDirection="right">
		<Toast.Root className="ToastRoot">...</Toast.Root>
		<Toast.Viewport />
	</Toast.Provider>
);

/* styles.css */
.ToastRoot[data-swipe="move"] {
	transform: translateX(var(--radix-toast-swipe-move-x));
}
.ToastRoot[data-swipe="cancel"] {
	transform: translateX(0);
	transition: transform 200ms ease-out;
}
.ToastRoot[data-swipe="end"] {
	animation: slideRight 100ms ease-out;
}

@keyframes slideRight {
	from {
		transform: translateX(var(--radix-toast-swipe-end-x));
	}
	to {
		transform: translateX(100%);
	}
}

<Toast.Root type="foreground">
	<Toast.Description>파일이 성공적으로 제거되었습니다.</Toast.Description>
	<Toast.Close>닫기</Toast.Close>
</Toast.Root>

<Toast.Root type="background">
	<Toast.Description>Confy-ui 1.0이 출시되었습니다.</Toast.Description>
	<Toast.Close>닫기</Toast.Close>
</Toast.Root>

<Toast.Root type="background">
	<Toast.Title>업그레이드 가능!</Toast.Title>
	<Toast.Description>Confy-ui 1.0이 출시되었습니다.</Toast.Description>
	<Toast.Action altText="계정 설정으로 이동하여 업그레이드">
		업그레이드
	</Toast.Action>
	<Toast.Close>닫기</Toast.Close>
</Toast.Root>

<Toast.Root type="foreground" duration={10000}>
	<Toast.Description>파일이 성공적으로 제거되었습니다.</Toast.Description>
	<Toast.Action altText="실행 취소 (Alt+U)">
		실행 취소 <kbd>Alt</kbd>+<kbd>U</kbd>
	</Toast.Action>
	<Toast.Close>닫기</Toast.Close>
</Toast.Root>

<Toast.Root type="foreground">
	<Toast.Description>저장되었습니다!</Toast.Description>
	<Toast.Close aria-label="닫기">
		<span aria-hidden>×</span>
	</Toast.Close>
</Toast.Root>

import { Toast } from "./your-toast";

export default () => (
	<Toast title="업그레이드 가능" content="Confy-ui 3.0이 출시되었습니다!">
		<button onClick={handleUpgrade}>업그레이드</button>
	</Toast>
);

// your-toast.jsx
import { Toast as ToastPrimitive } from "@confy-ui/react/primitives";

export const Toast = ({ title, content, children, ...props }) => {
	return (
		<ToastPrimitive.Root {...props}>
			{title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}
			<ToastPrimitive.Description>{content}</ToastPrimitive.Description>
			{children && (
				<ToastPrimitive.Action asChild>{children}</ToastPrimitive.Action>
			)}
			<ToastPrimitive.Close aria-label="닫기">
				<span aria-hidden>×</span>
			</ToastPrimitive.Close>
		</ToastPrimitive.Root>
	);
};

import { Toast } from "./your-toast";

export default () => {
	const savedRef = React.useRef();
	return (
		<div>
			<form onSubmit={() => savedRef.current.publish()}>
				{/* ... */}
				<button>저장</button>
			</form>
			<Toast ref={savedRef}>성공적으로 저장되었습니다!</Toast>
		</div>
	);
};

// your-toast.jsx
import * as React from "react";
import { Toast as ToastPrimitive } from "@confy-ui/react/primitives";

export const Toast = React.forwardRef((props, forwardedRef) => {
	const { children, ...toastProps } = props;
	const [count, setCount] = React.useState(0);

	React.useImperativeHandle(forwardedRef, () => ({
		publish: () => setCount((count) => count + 1),
	}));

	return (
		<>
			{Array.from({ length: count }).map((_, index) => (
				<ToastPrimitive.Root key={index} {...toastProps}>
					<ToastPrimitive.Description>{children}</ToastPrimitive.Description>
					<ToastPrimitive.Close>닫기</ToastPrimitive.Close>
				</ToastPrimitive.Root>
			))}
		</>
	);
});