@lookworld4/click-to-copy-wrapper

Small React control that copies a string to the clipboard and swaps its label to Copied! (configurable) for a short period.

Install

npm install @lookworld4/click-to-copy-wrapper

Peer dependencies: react and react-dom ≥ 16.8.

Usage

import { ClickToCopyWrapper } from '@lookworld4/click-to-copy-wrapper';

export function ShareSnippet() {
  const url = 'https://example.com/page';

  return (
    <ClickToCopyWrapper textToCopy={url} className="copy-btn">
      Copy link
    </ClickToCopyWrapper>
  );
}

Props

| Prop | Description | |------|-------------| | textToCopy | String written to the clipboard (required). | | children | Shown when idle (required). | | copiedLabel | Shown after a successful copy. Default: "Copied!". | | copiedDurationMs | How long the copied state lasts. Default: 2000. | | onCopy | Called after a successful copy. | | onCopyError | Called if copy fails. | | … | Other <button> attributes (className, style, etc.). |

The root element is a <button type="button">. While copied, [data-copied] is set for styling hooks.

Headless helper

import { copyToClipboard } from '@lookworld4/click-to-copy-wrapper';

await copyToClipboard('text');

Uses navigator.clipboard.writeText when available, otherwise a textarea + execCommand('copy') fallback.

License

MIT