useCopyToClipboard

The useCopyToClipboard hook is helpful when you want to copy any text content to clipboard using the modern navigator.clipboard.writeText method.

useCopyToClipboard

I love react!

Usage

Import the hook from @abhushanaj/react-hooks and use in required component;

./src/App.tsx

import { useCopyToClipboard } from '@abhushanaj/react-hooks';

function App() {
  const [copiedText, copyToClipboard] = useCopyToClipboard();

  const message = 'I love react!';

  return (
    <div>
      <h2>{message}</h2>
      <button
        onClick={() => {
          copyToClipboard(message);
        }}
      >
        {copiedText === null ? <Copy /> : <Check />}
      </button>
    </div>
  );
}

export default App;

API Reference

Return Value

The hook returns a tuple with [copiedText, copyToClipboardFn] signature.

Parameter	Type	Description	Default
copiedText	string|null	The last value copied text to clipboard.	null
copyToClipboardFn	(textToCopy: string)=>void	Function to copy a value to clipboard.	N/A