CopyButton CopyButton.tsx

0% Statements 0/4

0% Branches 0/2

0% Functions 0/1

0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { CopyIcon, CheckIcon } from "@chakra-ui/icons";
import {
  forwardRef,
  IconButton,
  IconButtonProps,
  useClipboard,
} from "@chakra-ui/react";
 
export interface CopyButtonProps extends Omit<IconButtonProps, "aria-label"> {
  // Optional since we set a default
  "aria-label"?: string;
  value: string;
}
 
export const CopyButton = forwardRef<CopyButtonProps, "button">(
  ({ value, ...btnProps }, ref) => {
    const { hasCopied, onCopy } = useClipboard(value);
 
    return (
      <IconButton
        aria-label="Copy Button"
        color="blue.500"
        colorScheme="brand"
        h={6}
        icon={hasCopied ? <CheckIcon color="green.300" /> : <CopyIcon />}
        minW="auto"
        ml={1}
        onClick={onCopy}
        ref={ref}
        variant="ghost"
        w={6}
        {...btnProps}
      />
    );
  }
);
 
CopyButton.displayName = "CopyButton";