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';
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;
};
Build fully functional accessible web applications with ease
Feedback
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