npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-copy-paste

v0.0.2

Published

React copy paste hook component

Downloads

3

Readme

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.