clipboard.tsx

 1import { Button, Tooltip } from '@material-ui/core';
 2import copy from 'clipboard-copy';
 3import * as React from 'react';
 4import isEqual from 'react-fast-compare';
 5
 6export interface ClipboardButtonProps {
 7    buttonText: string;
 8    toCopy: string;
 9    icon: React.ReactNode;
10}
11
12export const ClipboardButton = React.memo(function ClipboardButton(props: ClipboardButtonProps) {
13    const [showTooltip, setShowTooltip] = React.useState(false);
14
15    return (
16        <Tooltip
17            open={showTooltip}
18            title="Copied to clipboard."
19            leaveDelay={2000}
20            onClose={() => setShowTooltip(false)}
21        >
22            <Button
23                type="button"
24                onClick={() => {
25                    copy(props.toCopy);
26                    setShowTooltip(true);
27                }}
28                startIcon={props.icon}
29            >
30                {props.buttonText}
31            </Button>
32        </Tooltip>
33    );
34}, isEqual);