クリップボードにコピーし、「コピーしました」メッセージを表示する

押すだけ簡単コピペ機能のメッセージを表示してみた

• 備忘録用に、Reactで簡単に作ってみました。
• この記事を読むと、Material-UIのみで次のようなUIが実装できます。
  

クリップボードにコピーする

• Clipboard APIで実装します。

const anyText = "コピーさせたい内容"
navigator.clipboard.writeText(anyText);

メッセージの表示

• Material-UIのTooltip APIを使うと、簡単に実装できます。

import { Tooltip } from "@mui/material";

全体のサンプルコード

sample.tsx

import { Tooltip } from "@mui/material";

async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text)
  } catch (error) {
    console.log((error) || 'コピーに失敗しました')
  }
}

const Sample: React.FC<{}> = () => {
    const anyText = "コピーさせたい内容";
    const [openTip, setOpenTip] = useState<boolean>(false);
    
    const handleCloseTip = (): void => {
        setOpenTip(false);
    };
    
    const handleClickButton = (): void => {
        setOpenTip(true);
        copyToClipboard(anyText);
    };

    return(
        <>
            <h1>サンプル</h1>
            <Tooltip
                arrow
                open={openTip}
                onClose={handleCloseTip}
                disableHoverListener 
                placement="top"
                title="Copied!"
              >
                <button onClick={handleClickButton}>
                  クリップボードにコピーする
                </button>
              </Tooltip>
        </>
    );
}

参考資料

クリップボードにテキストをコピーするボタンの実装
React+material-uiでコピーボタン付きのテキストボックスを作る