@openworld-ui/copy-to-clipboard

A React-based utility package for copying text to the clipboard, featuring a pre-built UI component and a custom hook.

Installation

npm install @openworld-ui/copy-to-clipboard
# or
yarn add @openworld-ui/copy-to-clipboard

Features

• CopyButton: A ready-to-use React component with a copy icon and toast notification.
• useClipboard: A custom React hook for programmatic clipboard access with state management.
• clipboardCopy: A low-level utility function for copying text, supporting both the Async Clipboard API and fallback mechanisms.

Usage

CopyButton

The CopyButton component provides a standard UI for copying text.

import { CopyButton } from '@openworld-ui/copy-to-clipboard';

function App() {
  return (
    <CopyButton 
      copyValue="Text to copy" 
      label="Copy to clipboard" 
      toastText="Copied to clipboard!" 
    />
  );
}

Props

| Prop | Type | Description | | :--- | :--- | :--- | | copyValue | string | The text that will be copied to the clipboard. | | label | string | Accessibility label for the button. | | toastText | string | Message to display in the toast notification after copying. |

useClipboard Hook

For more control over the copy behavior and UI, use the useClipboard hook.

import { useClipboard } from '@openworld-ui/copy-to-clipboard';

function MyComponent() {
  const { copy, copied, isSupported } = useClipboard({
    copiedTimeout: 2000,
    onSuccess: () => console.log('Copied!'),
    onError: () => console.error('Failed to copy!')
  });

  return (
    <div>
      <button onClick={() => copy('Hello World')}>
        {copied ? 'Copied!' : 'Copy'}
      </button>
      {!isSupported() && <p>Clipboard API not supported in this browser.</p>}
    </div>
  );
}

Hook Options

• copiedTimeout (number): Duration (ms) for which the copied state remains true.
• onSuccess (function): Callback executed after a successful copy.
• onError (function): Callback executed when copying fails.
• selectOnCopy (boolean): If using targetRef, selects the text in the input/textarea on copy.

clipboardCopy Utility

A standalone async function for copying text.

import { clipboardCopy } from '@openworld-ui/copy-to-clipboard';

async function handleCopy() {
  try {
    await clipboardCopy('Text to copy');
    console.log('Copied successfully!');
  } catch (err) {
    console.error('Could not copy text: ', err);
  }
}

Dependencies

This package requires react (>= 16.8).

License

MIT