React Copy to Clipboard

React Copy to Clipboard is a React component library that provides a simple wrapper component for adding copy-to-clipboard functionality to any child element. It enables developers to easily add copy-to-clipboard features to their React applications by wrapping existing elements (buttons, spans, etc.) with the CopyToClipboard component.

Package Information

• Package Name: react-copy-to-clipboard
• Package Type: npm
• Language: JavaScript (React)
• Installation: npm install react-copy-to-clipboard

Core Imports

import { CopyToClipboard } from "react-copy-to-clipboard";

For CommonJS:

const { CopyToClipboard } = require("react-copy-to-clipboard");

Alternative default import:

import CopyToClipboard from "react-copy-to-clipboard";

Basic Usage

import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';

class App extends React.Component {
  state = {
    value: 'Hello World!',
    copied: false,
  };

  render() {
    return (
      <div>
        <input 
          value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} 
        />

        <CopyToClipboard 
          text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard</button>
        </CopyToClipboard>

        {this.state.copied ? <span style={{color: 'red'}}>Copied!</span> : null}
      </div>
    );
  }
}

Capabilities

CopyToClipboard Component

React component that wraps any child element to provide copy-to-clipboard functionality when clicked.

/**
 * Copy-to-clipboard React component wrapper
 */
class CopyToClipboard extends React.PureComponent {
  static propTypes = {
    text: PropTypes.string.isRequired,
    children: PropTypes.element.isRequired,
    onCopy: PropTypes.func,
    options: PropTypes.shape({
      debug: PropTypes.bool,
      message: PropTypes.string,
      format: PropTypes.string
    })
  };
}

Required Props

text: string (required)

• Text content to be copied to clipboard
• The actual text that will be copied when the wrapped element is clicked

children: React.Element (required)

• Single child React element that will trigger copy action when clicked
• Must be exactly one React element (button, span, div, etc.)
• Cannot be multiple children or fragments

Optional Props

onCopy: (text: string, result: boolean) => void (optional)

• Callback function called after copy operation completes
• Parameters:
  • text: The text that was copied
  • result: true if copy was successful, false otherwise
• Called whether copy succeeds or fails

options: object (optional)

• Configuration object passed to underlying copy-to-clipboard library
• Properties:
  • debug (boolean): Enable debug mode for copy-to-clipboard
  • message (string): Custom message to show in fallback prompt
  • format (string): MIME type for clipboard format
• See copy-to-clipboard API docs for complete options

Component Behavior

• Event Handling: Preserves existing onClick handlers on child elements - child's onClick will be called after the copy operation
• Props Forwarding: Forwards all additional props (className, style, etc.) to the child element
• Render Method: Clones the child element and adds the copy functionality via onClick handler
• Copy Mechanism: Uses the copy-to-clipboard library internally for cross-browser compatibility

Usage Examples:

// Basic button wrapper
<CopyToClipboard text="Hello World!">
  <button>Copy to clipboard</button>
</CopyToClipboard>

// With callback handling
<CopyToClipboard 
  text="Hello World!"
  onCopy={(text, result) => {
    if (result) {
      console.log('Successfully copied:', text);
    } else {
      console.log('Copy failed');
    }
  }}>
  <button>Copy to clipboard</button>
</CopyToClipboard>

// With options and existing onClick
<CopyToClipboard
  text="Hello World!"
  options={{message: 'Press Ctrl+C to copy'}}
  onCopy={() => alert('Copied!')}>
  <button onClick={() => console.log('Button clicked!')}>
    Copy to clipboard
  </button>
</CopyToClipboard>

// Forwarding props to child
<CopyToClipboard text="Hello World!">
  <span className="copy-button" style={{cursor: 'pointer'}}>
    Click to copy
  </span>
</CopyToClipboard>

Types

// PropTypes definitions (JavaScript)
CopyToClipboard.propTypes = {
  text: PropTypes.string.isRequired,
  children: PropTypes.element.isRequired,
  onCopy: PropTypes.func,
  options: PropTypes.shape({
    debug: PropTypes.bool,
    message: PropTypes.string,
    format: PropTypes.string
  })
};

CopyToClipboard.defaultProps = {
  onCopy: undefined,
  options: undefined
};

Platform Compatibility

• React Versions: ^15.3.0 || 16 || 17 || 18
• Environment: Browser environment (requires DOM for clipboard access)
• Build Formats:
  • CommonJS: lib/index.js
  • UMD: build/react-copy-to-clipboard.js (global: CopyToClipboard)
• Dependencies: Requires copy-to-clipboard ^3.3.1 and prop-types ^15.8.1

Error Handling

The component handles copy operation failures gracefully:

• If copy fails, onCopy callback receives result: false
• No exceptions are thrown on copy failure
• Fallback behavior is handled by the underlying copy-to-clipboard library