kripod / kripod/react-hooks

Add `useClipboard` hook

Open
#28 14 comments 0 reactions 1 assignee Claimed by @maciekgrzybek View on GitHub
enhancement
Dominant language
TypeScript
Stars
557
Forks
25
PR merge metrics
No merged PRs in 30d

Description

## Motivation

When it comes to interacting with the clipboard, [multiple options](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard) are available. The Clipboard API is [not yet widely supported](https://caniuse.com/#feat=mdn-api_clipboard) by browsers.

A compatible solution should be available out of the box:

- Try using the new Clipboard API by default
- Fallback to [`document.execCommand()`](https://w3c.github.io/editing/execCommand.html#clipboard-commands-0) if necessary

## Basic example

```tsx
function Example() {
const { copy, cut, paste } = useClipboard();
const [value, setValue] = useState('foo');

return (
<>
setValue(e.target.value)} />
copy(value)}>Copy

);
}
```

## Details

Lack of permissions (e.g. for pasting) should be handled gracefully with opt-in support for error callbacks.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.