useCopyToClipboard documentation

Why useCopyToClipboard

The useCopyToClipboard hook simplifies the process of copying text to the clipboard for users. It handles the complexities of interacting with the browser's Clipboard API and provides an easy-to-use function for copying text.

Installation

To use the useCopyToClipboard hook, simply import it into your React component:

// With NPM
npm install --dev '@pillar-ui/hooks'

// With YARN
yarn add '@pillar-ui/hooks'

// Uses
import { useCopyToClipboard } from '@pillar-ui/hooks'

Parameters

• timeout (optional): The timeout duration in milliseconds after which the copied state will be reset. Defaults to 300 milliseconds.

Returned Values

The useCopyToClipboard hook returns an object with the following properties:

• text: The currently copied text or null if no text is copied.
• copy: A function that allows you to copy text to the clipboard. Returns a promise indicating whether the copy operation was successful.
• copied: A boolean indicating whether the last copy operation was successful.

Usage

To use the useCopyToClipboard hook, call it inside your functional component like so:

import { useCopyToClipboard } from '@pillar-ui/hooks' // Adjust the path accordingly

function App() {
  const { text, copy, copied } = useCopyToClipboard(650)

  const handleCopy = () => {
    copy('Text to be copied').then((success) => {
      if (success) {
        console.log('Text copied successfully')
      } else {
        console.log('Copy operation failed')
      }
    })
  }

  return (
    <div>
      {copied && <p>Copied: {text}</p>}
      <button onClick={handleCopy}>{copied ? 'Copied' : 'Copy'}</button>
    </div>
  )
}

The useCopyToClipboard hook returns an array with two values: the current copied text value (initially null) and the copyToClipboard function. The copyToClipboard function takes a string parameter as the text to be copied and returns a promise that resolves to true if the text was successfully copied to the clipboard and false otherwise.

Implementation details

The useCopyToClipboard hook uses the browser's Clipboard API to copy text to the clipboard. If the Clipboard API is not available, the hook logs a warning message to the console and returns false.

TypeScript Support

The useCopyToClipboard hook is written in TypeScript and provides type definitions for its parameters and return values.

Troubleshooting

If you encounter issues with the useCopyToClipboard hook, ensure that your browser supports the Clipboard API and that your code is executing on the client-side.

Conclusion

The useCopyToClipboard hook provides an easy-to-use way to copy text to the clipboard in a React component. It simplifies the process of interacting with the browser's Clipboard API and provides a convenient function for copying text.