useClipboard

Usage

useClipboard hook provides interface to work with navigator.clipboard:

import { useClipboard } from 'hook-master-react';
 
function Demo() {
  const clipboard = useClipboard({ timeout: 500 });
 
  return (
    <button
      onClick={() => clipboard.copy('Copy this text.')}
    >
      {clipboard.copied ? 'Copied' : 'Copy'}
    </button>
  );
}

API

useClipboard hook accepts one argument options in which copied status timeout duration is defined (defaults to 2000). Hook returns object with properties:

• copy – function to copy value to the clipboard
• copied – value that indicates that copy handler was called less than options.timeout ms ago
• reset – function to clear timeout and reset copied to false
• error – contains Error object if something goes wrong

Definition

function useClipboard(
  options: { timeout: number } = { timeout: 2000 }
): {
  copy: (valueToCopy: any) => void;
  reset: () => void;
  error: Error;
  copied: boolean;
};