https://github.com/helderberto/use-clipboard-api
📋 useClipboardApi() is a React Hook that consumes Web Clipboard API.
https://github.com/helderberto/use-clipboard-api
clipboard hook react react-hook react-hooks web-api web-clipboard
Last synced: 9 months ago
JSON representation
📋 useClipboardApi() is a React Hook that consumes Web Clipboard API.
- Host: GitHub
- URL: https://github.com/helderberto/use-clipboard-api
- Owner: helderberto
- License: mit
- Created: 2022-01-31T13:43:33.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-09T20:33:45.000Z (11 months ago)
- Last Synced: 2025-07-02T15:17:07.154Z (9 months ago)
- Topics: clipboard, hook, react, react-hook, react-hooks, web-api, web-clipboard
- Language: TypeScript
- Homepage:
- Size: 1.79 MB
- Stars: 22
- Watchers: 0
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
📋 use-clipboard-api
useClipboardApi() is a React Hook that consumes Web Clipboard API.
[![build][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[![downloads][downloads-badge]][npmtrends]
---
## Table of Contents
- [Motivation](#motivation)
- [Usage](#usage)
- [Contributing](#contributing)
- [Bugs and Sugestions](#bugs-and-sugestions)
- [License](#license)
## Motivation
- Easy way to use [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) into your React project;
## Usage
To start using the `use-clipboard-api` in your project, first install in your project:
`yarn add use-clipboard-api` or `npm install use-clipboard-api`
Copy to clipboard using a ref:
```tsx
import React, { useRef } from 'react';
import useClipboardApi from 'use-clipboard-api';
function ClipboardExampleWithRef() {
const inputRef = useRef(null);
const [copiedValue, copy, error] = useClipboardApi();
const handleCopy = async () => {
if (inputRef.current) {
const valueToCopy = inputRef.current.value;
const success = await copy(valueToCopy);
if (success) {
console.log('Text copied:', copiedValue);
} else {
console.error('Copy failed:', error);
}
}
};
return (
Copy to Clipboard
{copiedValue && Copied: {copiedValue}
}
{error && Error: {error}
}
);
}
```
Copy to clipboard without using a ref:
```tsx
import React, { useState } from 'react';
import useClipboardApi from 'use-clipboard-api';
function ClipboardExampleWithoutRef() {
const [inputValue, setInputValue] = useState('');
const [copiedValue, copy, error] = useClipboardApi();
const handleCopy = async () => {
const success = await copy(inputValue);
if (success) {
console.log('Text copied:', copiedValue);
} else {
console.error('Copy failed:', error);
}
};
return (
setInputValue(e.target.value)}
placeholder="Type something to copy"
/>
Copy to Clipboard
{copiedValue && Copied: {copiedValue}
}
{error && Error: {error}
}
);
}
```
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Bugs and Sugestions
Report bugs or do suggestions using the [issues](https://github.com/helderberto/use-clipboard-api/issues).
## License
[MIT License](LICENSE) © [helderburato](https://helderberto.com)
[version-badge]: https://img.shields.io/npm/v/use-clipboard-api.svg?style=flat-square
[package]: https://www.npmjs.com/package/use-clipboard-api
[downloads-badge]: https://img.shields.io/npm/dm/use-clipboard-api.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/use-clipboard-api
[license-badge]: https://img.shields.io/npm/l/use-clipboard-api.svg?style=flat-square
[license]: https://github.com/helderberto/use-clipboard-api/blob/master/LICENSE
[build]: https://github.com/helderberto/use-clipboard-api/actions
[build-badge]: https://github.com/helderberto/use-clipboard-api/actions/workflows/ci.yml/badge.svg