TextWithInputCopy.tsx

import React, { useState, useEffect } from "react";
import CopyToClipboard from "react-copy-to-clipboard";
import CopySuccess from "../static/images/icons/copy-success.svg";
import styles from "./TextInputWithCopy.module.scss";

const TextInputWithCopy = ({
    label,
    text,
}: {
    label: string;
    text: string;
}) => {
    const [copied, setCopied] = useState(false);

    useEffect(() => {
        let timeout = setTimeout(() => null, 5000);
        if (copied) {
            timeout = setTimeout(() => {
                setCopied(false);
            }, 5000);
        }
        return () => clearTimeout(timeout);
    }, [copied]);

    return (
        <div className={styles.input}>
            <label>{label}</label>
            <div className={styles.wrapper}>
                <input type="text" value={text} spellCheck={false} readOnly />
                <CopyToClipboard text={text} onCopy={() => setCopied(true)}>
                    <button className={copied ? styles.success : ""}>
                        {copied ? (
                            <>
                                Copied <CopySuccess />
                            </>
                        ) : (
                            "Copy"
                        )}
                    </button>
                </CopyToClipboard>
            </div>
        </div>
    );
};

export default TextInputWithCopy;