Clipboard

텍스트를 클립보드로 복사할 때 사용하는 컴포넌트예요. 복사 버튼이나 복사 입력 필드를 손쉽게 만들 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { Clipboard } from "@chakra-ui/react"

<Clipboard.Root>
  <Clipboard.Trigger>
    <Clipboard.CopyText />
    <Clipboard.Indicator />
  </Clipboard.Trigger>
  <Clipboard.Input />
</Clipboard.Root>

예시 (Examples)

Button (버튼)

Clipboard.Trigger 컴포넌트를 사용하면 복사 버튼을 만들 수 있어요.

Input (입력 필드)

Clipboard.Input 컴포넌트를 사용하면 복사 입력 필드를 만들 수 있어요.

Timeout (시간 제한)

timeout prop을 사용하면 복사 완료 메시지가 표시되는 시간을 바꿀 수 있어요.

Link Appearance (링크 형태)

Clipboard.Trigger와 Clipboard.ValueText 컴포넌트를 조합해 링크 형태로 만든 예시예요.

Store (스토어)

대안으로 useClipboard 훅을 사용해서 커스텀 컴포넌트를 만들 수도 있어요.

Props

Root

Clipboard 컴포넌트의 Root 부분에 전달할 수 있는 prop을 확인해 주세요.

Explorer

Clipboard 컴포넌트의 각 부분을 인터랙티브하게 탐색해 보세요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.

더 알아보기 (Learn more)

Chakra UI의 Clipboard 컴포넌트에 대해 더 자세히 알아보려면 공식 문서와 Ark UI Clipboard 문서를 확인해 보세요.