useCopyToClipboard

클립보드 복사 기능을 제공하는 Hook입니다. 내부적으로 @teamsparta/utils의 copyToClipboard를 사용합니다.

Signature

function useCopyToClipboard(): UseCopyToClipboardReturn

Return

이름	타입	설명
copy	(text: string) => Promise<boolean>	텍스트를 클립보드에 복사하고, 성공 여부를 반환
copied	boolean	복사 성공 여부
reset	() => void	copied 상태를 초기화

사용 예시

기본 사용

import { useCopyToClipboard } from '@teamsparta/react';

function CopyButton({ url }: { url: string }) {
  const { copy } = useCopyToClipboard();

  async function handleClick() {
    const result = await copy(url);
    if (result) toast.success('복사됨');
  }

  return <button onClick={handleClick}>링크 복사</button>;
}

일정 시간 후 자동 초기화

import { useEffect } from 'react';
import { useCopyToClipboard } from '@teamsparta/react';

function CopyButton({ url }: { url: string }) {
  const { copy, copied, reset } = useCopyToClipboard();

  async function handleClick() {
    await copy(url);
  }

  useEffect(() => {
    if (!copied) return;

    const timerId = setTimeout(reset, 2000);

    return () => clearTimeout(timerId);
  }, [copied, reset]);

  return <button onClick={handleClick}>{copied ? '복사됨!' : '링크 복사'}</button>;
}