useClipboard

useClipboard copies values in components

Import: import { useClipboard } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

Usage

useClipboard copies the value in the component.

import { useClipboard } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
   const {copy, reset, error, copied } = useClipboard();

     return (
       <div>
         <p>{"copied: "+copied}</p>
         <p>error: {error}</p>
         <Group spacing="xl">
           <Button onClick={() => copy('copy message')}> copy </Button>
           <Button onClick={() => reset() }> reset </Button>
         </Group>
       </div>
     );
}

1
import { useClipboard } from '@kubed/hooks';
2
import { Button, Group } from '@kubed/components'
3

4
export default function App() {
5
   const {copy, reset, error, copied } = useClipboard();
6

7
     return (
8
       <div>
9
         <p>{"copied: "+copied}</p>
10
         <p>error: {error}</p>
11
         <Group spacing="xl">
12
           <Button onClick={() => copy('copy message')}> copy </Button>
13
           <Button onClick={() => reset() }> reset </Button>
14
         </Group>
15
       </div>
16
     );
17
}
18

19

API

1
function useClipboard(
2
     {timeout}?: {timeout?: number}
3
   ): {copy: (valueToCopy: any) => void, reset: () => void, error: Error, copied: boolean}

Params

Parameters	Default Value	Type	Description
timeout	`2000`	`number`	The time delay for event triggering

Result

Parameters	Default Value	Type	Description
copy	-	`(valueToCopy: any) => void`	The value to be copied
reset	-	`() => void`	Reset the copied value
error	-	`Error`	An error when copying a value
copied	-	`boolean`	Whether the copied value was successful