copy-to-clipboard.tsx

Overview

copy-to-clipboard.tsx is a React functional component that provides a user interface element for copying a given text string to the system clipboard. It visually indicates the copy status by toggling between a copy icon and a confirmation checkmark, along with a tooltip that shows either "Copy" or "Copied" based on the action state.

This component is designed to enhance UX by giving instant feedback when a user copies text, commonly used in applications for sharing codes, links, or snippets quickly.

Component: CopyToClipboard

Description

CopyToClipboard is a React component that wraps the react-copy-to-clipboard library's CopyToClipboard component (aliased here as Clipboard) with additional UI feedback and internationalized tooltips.

Props

• text (string):
  The text content that will be copied to the clipboard when the user clicks the component.

Internal State

• copied (boolean):
  Tracks whether the text has been successfully copied. It controls the icon and tooltip content. Initially false, set to true upon copying, and resets back to false after 2 seconds.

External Hooks and Dependencies

• useTranslate:
  A custom hook imported from @/hooks/common-hooks used for internationalization (i18n). Returns a translation function t scoped to the 'common' namespace, which is used to translate tooltip strings "copy" and "copied".

• Icons:

  • CopyOutlined from @ant-design/icons for the default copy icon.

  • CheckOutlined for the confirmation icon after copying.

• Tooltip from antd:
  Displays a hover tooltip that dynamically changes based on copy state.

• Clipboard from react-copy-to-clipboard:
  The underlying functionality that handles the actual copying to clipboard and triggers the callback on success.

Methods

handleCopy() : void

• Functionality:
  Called when the text is successfully copied. It sets the copied state to true, triggering UI changes. It also starts a timer of 2000 milliseconds (2 seconds) after which it resets the copied state to false to revert the UI back to the copy icon.

• Usage: Passed as the onCopy callback to the Clipboard component.

Render Output

The component renders a Tooltip wrapping the Clipboard component:

• The tooltip text is either the translated "copy" or "copied" string depending on the copied state.

• Inside the Clipboard, the icon switches between CopyOutlined (default) and CheckOutlined (when copied).

Usage Example

import CopyToClipboard from './copy-to-clipboard';

function Demo() {
  return (
    <div>
      <p>Copy this text:</p>
      <CopyToClipboard text="Hello, world!" />
    </div>
  );
}

Implementation Details

• The component relies on React's useState hook for managing the copied state.

• The timeout mechanism inside handleCopy ensures that the UI feedback ("Copied" icon and tooltip) only persists briefly, maintaining a responsive UX.

• The component abstracts away the clipboard copying logic by using the well-supported react-copy-to-clipboard package.

• Internationalization is seamlessly integrated via a custom hook, making this component adaptable to multiple languages without code changes.

• Ant Design's UI components (Tooltip and icons) provide consistent styling and behavior within applications using the Ant Design system.

Interaction with Other Parts of the System

• Internationalization System: Uses the useTranslate hook, which likely connects to a translation provider or context elsewhere in the app.

• UI Library: Depends on Ant Design (antd) for tooltips and icons, ensuring visual consistency.

• Clipboard Functionality: Delegates clipboard interaction to react-copy-to-clipboard.

• Parent Components: Typically used wherever text copying functionality is needed, such as sharing codes, URLs, or any textual data.

• No side effects or external state dependencies: State is local; no redux or context state mutations occur.

Mermaid Diagram: Component Interaction

componentDiagram
    component CopyToClipboard {
        +Props: { text: string }
        +State: copied: boolean
        +handleCopy(): void
    }

    component Clipboard {
        +Props: { text: string, onCopy: () => void }
    }

    component Tooltip {
        +Props: { title: string }
    }

    CopyToClipboard --> Clipboard : renders with onCopy={handleCopy}
    CopyToClipboard --> Tooltip : wraps Clipboard with dynamic title
    CopyToClipboard --> useTranslate : calls for localization
    Clipboard --> System Clipboard : copies text on click
    Tooltip --> User : shows tooltip on hover

Summary

copy-to-clipboard.tsx is a small but highly reusable React component that enhances user experience by providing intuitive clipboard copy functionality with visual and textual feedback. It integrates with internationalization and UI systems, making it a robust choice for any React/Ant Design-based application requiring copy-to-clipboard features.