use-clipboard

Wrapper around navigator.clipboard with feedback timeout
Import

Usage

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

import React from 'react';
import { Button } from '@mantine/core';
import { useClipboard } from '@mantine/hooks';
export function Demo() {
const clipboard = useClipboard({ timeout: 500 });
return (
<Button
color={clipboard.copied ? 'teal' : 'blue'}
onClick={() => clipboard.copy('Hello, world!')}
>
{clipboard.copied ? 'Copied' : 'Copy'}
</Button>
);
}

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