diff --git a/snippets/useCopyToClipboard.md b/snippets/useCopyToClipboard.md new file mode 100644 index 000000000..b7b6e7db4 --- /dev/null +++ b/snippets/useCopyToClipboard.md @@ -0,0 +1,60 @@ +--- +title: useCopyToClipboard +tags: hooks,effect,state,callback,advanced +--- + +A hook that 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. +- Return the `copied` state variable and the `copy` callback. + +```jsx +const useCopyToClipboard = (text) => { + const copyToClipboard = (str) => { + const el = document.createElement('textarea'); + el.value = str; + el.setAttribute('readonly', ''); + el.style.position = 'absolute'; + el.style.left = '-9999px'; + document.body.appendChild(el); + const selected = + document.getSelection().rangeCount > 0 + ? document.getSelection().getRangeAt(0) + : false; + el.select(); + const success = document.execCommand('copy'); + document.body.removeChild(el); + if (selected) { + document.getSelection().removeAllRanges(); + document.getSelection().addRange(selected); + } + return success; + }; + + const [copied, setCopied] = React.useState(false); + + const copy = React.useCallback(() => { + if (!copied) setCopied(copyToClipboard(text)); + }, [text]); + React.useEffect(() => () => setCopied(false), [text]); + + return [copied, copy]; +}; +``` + +```jsx +const TextCopy = (props) => { + const [copied, copy] = useCopyToClipboard('Lorem ipsum'); + return ( +
+ + {copied && 'Copied!'} +
+ ); +}; + +ReactDOM.render(, document.getElementById('root')); +```