Table of Contents

• Motivation
• Usage
• Contributing
• Bugs and Sugestions
• License

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>
  );
}

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Bugs and Sugestions

Report bugs or do suggestions using the issues.

License

MIT License © helderburato