Reactで全角カナ→半角カナに変換

今までの過程

正規表現を用いた変換、マッピングを用いた変換を組み合わせていた

ライブラリ

mojiを使う
npm i moji

実装

import React, { useState, useEffect } from "react";
import moji from "moji";
import { Box, TextField, Typography, styled } from "@mui/material";

const StyledBox = styled(Box)(({ theme }) => ({
  border: "1px solid black",
  backgroundColor: "#fff",
  width: 220,
}));

function App() {
  const [inputValue, setInputValue] = useState("");
  const [convertedValue, setConvertedValue] = useState("");
  const [editedValue, setEditedValue] = useState(""); // 追加

  useEffect(() => {
    //ひらがなからカタカナへ変換
    const hiraToKana = moji(inputValue)
      .convert("HG", "KK") // ひらがな→カタカナ
      .convert("ZS", "HS") // 全角スペース→半角スペース
      .convert("ZK", "HK") // 全角カナ→半角カナ
      .convert("ZE", "HE") //全角記号→半角記号
      .toString();
    setConvertedValue(hiraToKana);
    setEditedValue(hiraToKana); // 追加
  }, [inputValue]);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleEdit = (event) => {
    // 追加
    setEditedValue(event.target.value);
  };

  return (
    <div className="App">
      <Typography>入力欄</Typography>
      <TextField
        type="text"
        value={inputValue}
        onChange={handleChange}
        sx={{ backgroundColor: "#fff" }}
      />
      <Typography>出力欄</Typography>
      <Box>
        <TextField
          value={editedValue}
          //   onChange={handleEdit} //バックスペースしか正しい動き基本出来ない
          sx={{ backgroundColor: "#fff" }}
        />{" "}
        {/* 変更 */}
        <StyledBox>
          <Typography>{convertedValue}</Typography>
        </StyledBox>
      </Box>
    </div>
  );
}

export default App;

まとめ

あの長々したマッピングを書いていた時間は何だったのか...
便利なライブラリを見つけるって大事

とはいえ、やはりReact、というかjavascriptで入力欄自体にリアルタイムで半角カナを入力するのは現状厳しい