Table of Contents
Motivation
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
