Copy
A simple hook to copy text from a given HTML element to your clipboard with copy-to-clipboard library.
version
4.1.2
install
yarn add @welcome-ui/utils.copy
usage
import { Copy } from '@welcome-ui/utils.copy'
Copy an element #
Copy the content from another HTML element by creating a ref
and passing it to useCopyText
.
You can pass a timeout
value (in milliseconds) to "reset" the copied
value.
function() {const copyRef = React.React.useRef()const [copy, copied] = useCopyText(copyRef, 2000)return (<><div ref={copyRef}>This text will be copied</div><Button onClick={copy} mt="sm">{copied ? (<><CheckIcon /><span>Copied!</span></>) : (<><LinkIcon /><span>Copy text</span></>)}</Button></>)}
Copy a string #
You can also copy a simple string
function() {const url = typeof window !== 'undefined' && window.location.hrefconst [copy, copied] = useCopyText(url, 2000)return (<><Button onClick={copy} variant={copied ? 'tertiary' : 'secondary'}>{copied ? (<><CheckIcon /><span>Copied!</span></>) : (<><LinkIcon /><span>Copy URL</span></>)}</Button></>)}
Packages #
Dependencies #
Peer dependencies #
Previous
IconsFont