use-clipboard-api

📋 use-clipboard-api

useClipboardApi() is a React Hook that consumes Web Clipboard API.

---

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

Copy to clipboard using a ref:

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

Copy to clipboard without using a ref:

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