https://github.com/danoc/react-use-clipboard

React hook that provides copy to clipboard functionality.
https://github.com/danoc/react-use-clipboard

clipboard component hooks react

Last synced: about 1 month ago
JSON representation

React hook that provides copy to clipboard functionality.

• Host: GitHub
• URL: https://github.com/danoc/react-use-clipboard
• Owner: danoc
• License: mit
• Created: 2019-01-29T05:43:03.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-10-24T23:06:26.000Z (about 1 year ago)
• Last Synced: 2024-07-15T18:02:46.254Z (5 months ago)
• Topics: clipboard, component, hooks, react
• Language: TypeScript
• Size: 1.19 MB
• Stars: 266
• Watchers: 1
• Forks: 15
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-clipboard`
• awesome-react-hooks-cn - `react-use-clipboard`
• awesome-react-hooks - `react-use-clipboard`
• awesome-react-hooks - `react-use-clipboard`
• awesome-react-hooks - react-use-clipboard - React hook that provides copy to clipboard functionality. (Packages)

README

        
# 📋 react-use-clipboard

[![NPM version](https://badgen.net/npm/v/react-use-clipboard)](https://www.npmjs.com/package/react-use-clipboard) [![Test build status](https://github.com/danoc/react-use-clipboard/workflows/Test/badge.svg)](https://github.com/danoc/react-use-clipboard/actions?query=workflow%3ATest) [![Bundle size](https://badgen.net/bundlephobia/min/react-use-clipboard?label=size)](https://bundlephobia.com/result?p=react-use-clipboard) [![Bundle size](https://badgen.net/bundlephobia/minzip/react-use-clipboard?label=gzip%20size)](https://bundlephobia.com/result?p=react-use-clipboard)

> A React Hook that provides copy to clipboard functionality.

## Install

You can install `react-use-clipboard` with npm, Yarn, or pnpm.

```bash

npm install react-use-clipboard

yarn add react-use-clipboard

pnpm install react-use-clipboard

```

## Usage

Here's how to use `react-use-clipboard`:

```jsx

import useClipboard from "react-use-clipboard";

function App() {

  const [isCopied, setCopied] = useClipboard("Text to copy");

  return (

    

      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}

    

  );

}

```

You can reset the `isCopied` value after a certain amount of time with the `successDuration` option.

```jsx

import useClipboard from "react-use-clipboard";

function App() {

  const [isCopied, setCopied] = useClipboard("Text to copy", {

    // `isCopied` will go back to `false` after 1000ms.

    successDuration: 1000,

  });

  return (

    

      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}

    

  );

}

```

This package only works in versions of React that support Hooks.