useClipboard

The useClipboard hook manages the clipboard state and provides functions to interact with it.

Note: This hook relies on the Clipboard API (opens in a new tab) which currently has limited browser support. It also requires HTTPS to work in modern browsers.

Usage

1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

2. Import useClipboard into your component.

import { useClipboard } from '@ridgehkr/useful'

Example

import useClipboard, { ClipboardStatus } from '@ridgehkr/useful'
 
function ClipboardExample() {
  const { value, copy, clear }: ClipboardStatus = useClipboard()
 
  return (
    <div>
      <p>Clipboard Value: {value}</p>
      <button onClick={() => copy('Text to be copied')}>Copy Text</button>
      <button onClick={clear}>Clear Clipboard</button>
    </div>
  )
}

API Reference

Hook Signature

useClipboard(): ClipboardStatus

Parameters

useClipboard does not accept any parameters.

Return Value

The hook returns a ClipboardStatus object with the following properties: