git.iko.soy/bridge
on e5702f5 help sign in
bridge/src/components/CopyButton.js
42 lines 1.1 kB history raw
1import React, { useCallback, useEffect, useRef, useState } from 'react';
2import { LinkButton } from 'indigo-react';
3import cn from 'classnames';
4import copy from 'copy-to-clipboard';
6const COPY_DELAY = 2 * 1000; // ms
7const renderDefaultCopyText = didCopy => (didCopy ? 'Copied!' : 'Copy');
9export default function CopyButton({
10 as: As = LinkButton,
11 text,
12 children = renderDefaultCopyText,
13 className,
14 ...rest
15}) {
16 const [didCopy, setDidCopy] = useState(false);
18 // what we really want here is a useDebouncedCallback from use-debounced
19 // but that's a relatively large dep for a single simple usage so ¯\_(ツ)_/¯
20 const listener = useRef(); // <NodeJS.Listener>
21 useEffect(() => () => clearTimeout(listener.current), []);
23 const doCopy = useCallback(() => {
24 copy(text);
25 setDidCopy(true);
27 clearTimeout(listener.current);
28 listener.current = setTimeout(() => setDidCopy(false), COPY_DELAY);
29 }, [text]);
31 return (
32 <As
33 onClick={doCopy}
34 className={cn(className, {
35 black: !didCopy,
36 green3: didCopy,
37 })}
38 {...rest}>
39 {children(didCopy)}
40 </As>
41 );