React + Material-UIで文字を1度だけ点滅させる

May 05, 2022

やりたいこと

React + Material-UIで任意のタイミングて文字を1度だけ点滅させたい。
用途としては、自動でデータが更新された場合などにユーザーに更新箇所がわかりやすいようにしたい時など。

実装

import React, { useState } from "react";
import { Button, Typography } from "@mui/material";

// 点滅文字を表示させるためのコンポーネント
const BlinkingTypography = ({ text, isDisplayText, ...options }) => {
  return (
    <Typography
      sx={{
        transition: "1s",
        opacity: isDisplayText ? 1 : 0
      }}
      {...options}
    >
      {text}
    </Typography>
  );
};

const App = (props) => {
  // 点滅表示に使用する変数
  const [isDisplayText, setIsDisplayText] = useState(true);

  // 文字列を点滅させるためのメソッド
  const blinkText = () => {
    setIsDisplayText(false);
    setTimeout(() => {
      setIsDisplayText(true);
    }, 1000);
  };
  return (
    <>
      <Button onClick={() => blinkText()}>Button</Button>
      <BlinkingTypography text="Blinging!!" isDisplayText={isDisplayText} />
    </>
  );
};

export default App;

解説

BlinkingTypography

引数で渡している isDisplayText を使用して動的にopacity を切り替えています。

blinkText

即時 isDisplayText に false をセットした後、1秒後に再度 true をセットすることで点滅を表現しています。

使用例

以下のサービスで実際に使用しています。
STEPN CHART