useClipboard

Introduce

클립보드에 텍스트나 이미지를 복사할 수 있도록 도와주는 훅입니다.

// 훅 인터페이스
export interface UseClipboardProps {
  resetTime?: number;
}
 
export interface UseClipboardReturns {
  copied: boolean;
  copyText: (text: string) => void;
  copyImg: (path: string) => void;
}
 
const useClipboard = (props: UseClipboardProps): UseClipboardReturns

이미지는 URL을 입력해 복사할 수 있습니다.

⚠️

클립보드 API (opens in a new tab)가 지원되지 않는 환경에선 에러가 발생합니다.

Props

resetTime: 복사 성공 후, 복사 상태에 대한 플래그(copied)가 리셋되는 시간(ms)
- default: 5000

Returns

copied: 클립보드 복사가 성공했는지를 나타내는 플래그
copyText: 텍스트를 클립보드에 복사하는 비동기 함수
copyImg: 이미지를 클립보드에 복사하는 함수

Examples

TestComponent.tsx

import { useClipboard } from '@frontend-opensource/use-react-hooks';
 
const TestComponent = () => {
  const { copied, copyText, copyImg } = useClipboard();
 
  return (
    <div>
      <button onClick={() => copyText('Hello World')}>Copy Text</button>
      <button onClick={() => copyImg('https://example.com/image.png')}>
        Copy Image
      </button>
      <p> {copied ? 'Copied!' : ''}</p>
    </div>
  );
};

useReactHooks useConfirm