CopyButton

CopyButton (복사 버튼)

CopyButton 컴포넌트는 주어진 텍스트를 클립보드에 복사해 주는 버튼 컴포넌트예요. 현재는 use-clipboard 훅을 기반으로 해요.

출처: 문서

본문

CopyButton은 use-clipboard 훅을 기반으로 해요. children은 다음 속성들을 가진 객체를 받는 함수예요.

  • copied – 주어진 값이 최근에 클립보드에 복사되었는지 나타내는 boolean 값. 일정 시간(기본 500ms) 후 리셋돼요
  • copy – 주어진 값을 클립보드에 복사하기 위해 호출해야 하는 함수
import { CopyButton, Button } from '@mantine/core';

function Demo() {
  return (
    <CopyButton value="https://mantine.dev">
      {({ copied, copy }) => (
        <Button color={copied ? 'teal' : 'blue'} onClick={copy}>
          {copied ? 'Copied url' : 'Copy url'}
        </Button>
      )}
    </CopyButton>
  );
}

보안 (Security)

보안상의 이유로 CopyButton 컴포넌트는 iframe 안에서는 동작하지 않고, file:// 프로토콜로 연 로컬 파일에서는 동작하지 않을 수 있어요(http:// 프로토콜을 사용하는 로컬 웹사이트에서는 정상 동작해요). navigator.clipboard에 대해 더 자세히 알고 싶다면 여기를 참고해요.

타임아웃 (Timeout)

copied 상태가 리셋되는 timeout을 직접 지정할 수 있어요.

import { ActionIcon, CopyButton, Tooltip } from '@mantine/core';
import { CopyIcon, CheckIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <CopyButton value="https://mantine.dev" timeout={2000}>
      {({ copied, copy }) => (
        <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
          <ActionIcon color={copied ? 'teal' : 'gray'} variant="subtle" onClick={copy}>
            {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
          </ActionIcon>
        </Tooltip>
      )}
    </CopyButton>
  );
}

서버 컴포넌트와의 비호환성

CopyButton은 함수를 children으로 사용해야 하기 때문에 React 서버 컴포넌트와 호환되지 않아요. 사용하려면 파일 맨 위에 "use client";를 추가해요.

더 알아보기 (Learn more)