In reactJS, how to copy text to clipboard?

In ReactJS, copying text to the clipboard can typically be achieved using native JavaScript APIs such as document.execCommand or the more modern navigator.clipboard.writeText. Here are two common methods:

Method One: Using document.execCommand

This is an older method but has broader browser compatibility, including older versions:

jsx
class CopyToClipboard extends React.Component {
  copyText = () => {
    // Select the text to copy
    this.textArea.select();
    // Execute the copy command
    document.execCommand('copy');
  };

  render() {
    return (
      <div>
        <textarea
          ref={(textarea) => this.textArea = textarea}
          value="This is the text to be copied!"
        />
        <button onClick={this.copyText}>Copy Text</button>
      </div>
    );
  }
}

In this example, we create a text area and a button. Clicking the button triggers the copyText method, which selects the text within the text area and uses document.execCommand('copy') to perform the copy operation.

Method Two: Using navigator.clipboard.writeText

This is a more modern method and is recommended for its simplicity and security:

jsx
const CopyToClipboard = () => {
  const textToCopy = "This is the text to be copied!";

  const copyText = async () => {
    try {
      // Use the navigator.clipboard API to copy the text
      await navigator.clipboard.writeText(textToCopy);
      console.log('Text copied successfully!');
    } catch (err) {
      console.error('Copy failed: ', err);
    }
  };

  return (
    <div>
      <button onClick={copyText}>Copy Text</button>
    </div>
  );
}

In this example, we use navigator.clipboard.writeText to copy the text. This method returns a promise, so we can handle it using async and await, and receive notifications when the copy is successful or fails.

In practical applications, it is recommended to use the navigator.clipboard method as it is more modern and secure (for example, it requires an HTTPS connection) and provides better error handling mechanisms. However, note that older browser versions may not support this API.