use-clipboard

Wrapper around navigator.clipboard with feedback timeout
Import

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>
);
}

No iframes

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