use-clipboard

use-clipboard

피드백 타임아웃이 있는 클립보드 복사를 제공하는 use-clipboard 훅에 대해 설명해 드릴게요. 텍스트를 클립보드에 복사하고, 복사 상태를 추적하고, 오류를 처리하고, 설정한 타임아웃 후에 상태를 초기화해요. 내부적으로 navigator.clipboard.writeText API를 사용해요.

출처: 문서

본문

사용법

import { Button } from '@mantine/core';
import { useClipboard } from '@mantine/hooks';

function Demo() {
  const clipboard = useClipboard({ timeout: 500 });

  return (
    <Button
      color={clipboard.copied ? 'teal' : 'blue'}
      onClick={() => clipboard.copy('Hello, world!')}
    >
      {clipboard.copied ? 'Copied' : 'Copy'}
    </Button>
  );
}

제한 사항

보안상 이유로 use-clipboard 훅은 iframe에서는 동작하지 않고, file:// 프로토콜로 연 로컬 파일에서도 동작하지 않을 수 있어요(http:// 프로토콜을 사용하는 로컬 웹사이트에서는 정상 동작해요). navigator.clipboard에 대한 자세한 내용은 여기에서 볼 수 있어요.

정의

interface UseClipboardOptions {
  /** Time in ms after which the copied state will reset, `2000` by default */
  timeout?: number;
}

interface UseClipboardReturnValue {
  /** Function to copy value to clipboard */
  copy: (value: any) => void;

  /** Function to reset copied state and error */
  reset: () => void;

  /** Error if copying failed */
  error: Error | null;

  /** Boolean indicating if the value was copied successfully */
  copied: boolean;
}

function useClipboard(options?: UseClipboardOptions): UseClipboardReturnValue

내보내는 타입

UseClipboardOptions와 UseClipboardReturnValue 타입은 @mantine/hooks 패키지에서 내보내지므로 애플리케이션에서 import할 수 있어요:

import type { UseClipboardOptions, UseClipboardReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)