Wrapper around navigator.clipboard with feedback timeout


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

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


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


function useClipboard(options: { timeout: number } = { timeout: 2000 }): {
copy: (valueToCopy: any) => void;
reset: () => void;
error: Error;
copied: boolean;
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback