useClipboard

useClipboard 在组件中复制值

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

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

用法

useClipboard 在组件中复制值。

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

参数	默认值	类型	描述
timeout	`2000`	`number`	事件触发的时间延迟时间

Result

参数	默认值	类型	描述
copy	-	`(valueToCopy: any) => void`	需要复制的值
reset	-	`() => void`	重置复制的值
error	-	`Error`	复制值时出现的错误
copied	-	`boolean`	复制值是否成功