Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Copy text to clipboard with status tracking
import { useClipboard } from '@kivora/react';
function CopyButton() {
const { copy, copied } = useClipboard();
return (
<button onClick={() => copy('Hello, world!')}>
{copied ? 'Copied!' : 'Copy'}
</button>
);
}
'idle'.'idle' | 'copied' | 'error'.true when status is 'copied'.'idle'.const { copy, copied } = useClipboard();
<button onClick={() => copy('Hello!')}>
{copied ? 'Copied!' : 'Copy'}
</button>
const { copy, status } = useClipboard(5000); // 5 second timeout
const handleCopy = async () => {
await copy('https://example.com/share');
};
return (
<div>
<button onClick={handleCopy}>Share Link</button>
{status === 'copied' && <span>Link copied!</span>}
{status === 'error' && <span>Failed to copy</span>}
</div>
);
const { copy, copied, reset } = useClipboard();
return (
<>
<button onClick={() => copy('Code snippet')}>
{copied ? 'Copied!' : 'Copy Code'}
</button>
{copied && <button onClick={reset}>Reset</button>}
</>
);
type ClipboardStatus = 'idle' | 'copied' | 'error';
interface UseClipboardReturn {
copy: (text: string) => Promise<void>;
status: ClipboardStatus;
copied: boolean;
reset: () => void;
}
function useClipboard(timeout?: number): UseClipboardReturn;