1import React, { useRef } from 'react';
2import useClipboardApi from 'use-clipboard-api';
3
4function ClipboardExampleWithRef() {
5  const inputRef = useRef<HTMLInputElement | null>(null);
6  const [copiedValue, copy, error] = useClipboardApi();
7
8  const handleCopy = async () => {
9    if (inputRef.current) {
10      const valueToCopy = inputRef.current.value;
11      const success = await copy(valueToCopy);
12
13      if (success) {
14        console.log('Text copied:', copiedValue);
15      } else {
16        console.error('Copy failed:', error);
17      }
18    }
19  };
20
21  return (
22    <div>
23      <input ref={inputRef} type="text" placeholder="Type something to copy" />
24      <button onClick={handleCopy}>Copy to Clipboard</button>
25      {copiedValue && <p>Copied: {copiedValue}</p>}
26      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
27    </div>
28  );
29}

1import React, { useState } from 'react';
2import useClipboardApi from 'use-clipboard-api';
3
4function ClipboardExampleWithoutRef() {
5  const [inputValue, setInputValue] = useState('');
6  const [copiedValue, copy, error] = useClipboardApi();
7
8  const handleCopy = async () => {
9    const success = await copy(inputValue);
10
11    if (success) {
12      console.log('Text copied:', copiedValue);
13    } else {
14      console.error('Copy failed:', error);
15    }
16  };
17
18  return (
19    <div>
20      <input
21        type="text"
22        value={inputValue}
23        onChange={(e) => setInputValue(e.target.value)}
24        placeholder="Type something to copy"
25      />
26      <button onClick={handleCopy}>Copy to Clipboard</button>
27      {copiedValue && <p>Copied: {copiedValue}</p>}
28      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
29    </div>
30  );
31}