Copy field

Free · MIT

A value a person copies somewhere else (a callback URL, a scope list). The whole field is the copy target; it says "Copied" only once the clipboard took the value, and its tick (or the cross of a refused write) appears then, never while the write is still pending.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/copy-field

Brings in: locale, use-copy, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { CopyField } from "@/components/copy-field"

export default function Example() {
  return <CopyField className="max-w-sm" label="Request id" value="req_01JC8Z4M2V7Q" />
}

<CopyField>

Prop	Type	Default	Description
labelrequired	`string`	—	What the value is, shown above it.
valuerequired	`string`	—	The text that is shown and copied.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under copyField in <LocaleProvider strings={{ … }}>; the table is exported as copyFieldStrings.

Key	English
copy	Copy
copied	Copied
failed	Couldn’t copy