- Easy way to use Clipboard API into your React project;
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>
);
}Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Report bugs or do suggestions using the issues.