react-copy-paste

Certainly! Below is a README file for your react-copy-paste npm package, which includes details on installation, usage, and an example. I've also included an example component that demonstrates how to use your useCopyToClipboard hook in a practical React scenario.

README for react-copy-paste

# react-copy-paste

A React hook for efficiently handling clipboard operations. This package provides an easy way to integrate clipboard copy functionality in your React applications with an optional timeout to revert the copy status.

## Installation

You can install `react-copy-paste` via npm or yarn:

```bash
npm install react-copy-paste

or

yarn add react-copy-paste

Usage

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

import { useCopyToClipboard } from 'react-copy-paste';

API

useCopyToClipboard({ timeout })

• timeout: Optional. The duration in milliseconds after which the isCopied state will revert back to false. Default is 2000 milliseconds (2 seconds).

Returns

• isCopied: A boolean state that indicates whether the text is currently copied.
• copyToClipboard: A function that accepts a string and copies it to the clipboard.

Example

Here is an example of how to use the useCopyToClipboard hook in a component:

import React from 'react';
import { useCopyToClipboard } from 'react-copy-paste';

function CopyExample() {
    const { isCopied, copyToClipboard } = useCopyToClipboard();

    const handleCopy = () => {
        copyToClipboard('Hello, clipboard!');
    };

    return (
        <div>
            <button onClick={handleCopy}>Copy to Clipboard</button>
            {isCopied && <span>Copied!</span>}
        </div>
    );
}

export default CopyExample;

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

This README provides clear instructions on how to install and use the hook, along with a straightforward example. The use of the Markdown format ensures it's ready to be integrated directly into your npm package's repository for easy visibility and usage by developers.