use-clipboard

Usage

use-clipboard hook provides interface to work with navigator.clipboard:

import { Button } from '@mantine/core';
import { useClipboard } from '@mantine/hooks';

function Demo() {
  const clipboard = useClipboard({ timeout: 500 });

  return (
    <Button
      color={clipboard.copied ? 'teal' : 'blue'}
      onClick={() => clipboard.copy('Hello, world!')}
    >
      {clipboard.copied ? 'Copied' : 'Copy'}
    </Button>
  );
}

navigator.clipboard limitations

Due to security reasons use-clipboard hook will not work in iframes and may not work with local files opened with file:// protocol (hook will work fine with local websites that are using http:// protocol). You can learn more about navigator.clipboard here.

API

use-clipboard 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;
};