andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update hook descriptions

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-11-16 14:17:53 +02:00
parent 9e9e7443c2
commit eeccde742b
13 changed files with 121 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/useCopyToClipboard.md
View File

@ -3,17 +3,17 @@ title: useCopyToClipboard
tags: hooks,effect,state,callback,advanced
---
A hook that copies the given text to the clipboard.
Copies the given text to the clipboard.
- Use the [copyToClipboard](/js/s/copy-to-clipboard/) snippet to copy the text to clipboard.
- Use the `React.useState()` hook to initialize the `copied` variable.
- Use the `React.useCallback()` hook to create a callback for the `copyToClipboard` method.
- Use the `React.useEffect()` hook to reset the `copied` state variable if the `text` changes.
- Use the `useState()` hook to initialize the `copied` variable.
- Use the `useCallback()` hook to create a callback for the `copyToClipboard` method.
- Use the `useEffect()` hook to reset the `copied` state variable if the `text` changes.
- Return the `copied` state variable and the `copy` callback.
```jsx
const useCopyToClipboard = (text) => {
const copyToClipboard = (str) => {
const useCopyToClipboard = text => {
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
@ -46,7 +46,7 @@ const useCopyToClipboard = (text) => {
```
```jsx
const TextCopy = (props) => {
const TextCopy = props => {
const [copied, copy] = useCopyToClipboard('Lorem ipsum');
return (
<div>