React+MaterialUIで作るコピーボタン付きTextFieldの作り方を紹介

React + MaterialUIのTextFieldに表示されている文字列を、クリップボードにコピーするボタンがついたTextFieldの作成方法を紹介します。

見た目
クリップボードにコピーするComponent
利用方法

見た目

よく見かける以下のような見た目のものです。

ReadOnlyのTextFieldの右側にあるコピーボタンを押下するとクリップボードに文字列がコピーされます。
そして、コピーされたことをSnackbarにてユーザーに知らせます。

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

こちらのソースコードをそのままコピペして利用してください。

CopyToClipboardButton.tsx

import React, { useState } from "react";
import { IconButton, Snackbar } from "@mui/material";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';

type Props = {
  text: string;
};

const CopyToClipboardButton: React.FC<Props> = (props: Props) => {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(true);
    navigator.clipboard.writeText(props.text);
  };

  return (
    <>
      <IconButton onClick={handleClick} color="primary">
        <ContentCopyIcon />
      </IconButton>
      <Snackbar
        message="Copied to clibboard"
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
        autoHideDuration={2000}
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
};

export default CopyToClipboardButton;

TypeScript

利用方法

以下のソースコードのTextField部分が利用方法です。
CopyToClipboardButtonタグのtextプロパティにコピーしたい文字列を入れてください。

Index.tsx

import React from 'react';
import { InputAdornment, TextField } from '@mui/material';
import CopyToClipboardButton from './CopyToClipboardButton';

const Index: React.FC = () => {
  const copyText = "Sample text";

  return (
    <TextField
      value={copyText}
      slotProps={{
        input: {
          readOnly: true,
          endAdornment: (
            <InputAdornment position="end">
              <CopyToClipboardButton text={copyText} />
            </InputAdornment>
          ),
        },
      }}
    />
  )
);
export default Index;

TypeScript

今は一旦コードのみを紹介します。
そのうち解説をしていこうかと思います。