Open Source Ecosystems

Motivation

Easy way to use Clipboard API into your React project;

Usage

To start using the use-clipboard-api in your project, first install in your project:

yarn add use-clipboard-api or npm install use-clipboard-api

import React, { useRef } from 'react';
import useClipboardApi from 'use-clipboard-api';

function ClipboardExampleWithRef() {
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [copiedValue, copy, error] = useClipboardApi();

  const handleCopy = async () => {
    if (inputRef.current) {
      const valueToCopy = inputRef.current.value;
      const success = await copy(valueToCopy);

      if (success) {
        console.log('Text copied:', copiedValue);
      } else {
        console.error('Copy failed:', error);
      }
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Type something to copy" />
      <button onClick={handleCopy}>Copy to Clipboard</button>
      {copiedValue && <p>Copied: {copiedValue}</p>}
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
    </div>
  );
}

import React, { useState } from 'react';
import useClipboardApi from 'use-clipboard-api';

function ClipboardExampleWithoutRef() {
  const [inputValue, setInputValue] = useState('');
  const [copiedValue, copy, error] = useClipboardApi();

  const handleCopy = async () => {
    const success = await copy(inputValue);

    if (success) {
      console.log('Text copied:', copiedValue);
    } else {
      console.error('Copy failed:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type something to copy"
      />
      <button onClick={handleCopy}>Copy to Clipboard</button>
      {copiedValue && <p>Copied: {copiedValue}</p>}
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
    </div>
  );
}