ztext.js+Reactで3D表示した文字を途中で変更したいとき

文字や絵文字、画像を簡単に3D表示できるztext.jsをReactで扱うときのメモです。
https://bennettfeely.com/ztext/

インストール

yarn add ztext-react

文字を変更したい場合

文字を途中で変更したい場合、以下のコードだとうまく変わりませんでした。
（ZtextWrapperに渡すdisplayTextを、親コンポーネントがstateとして持っているイメージ）

import { FC } from 'react';
import Ztext from 'react-ztext';

const ZtextWrapper: FC<{
  displayText: string;
}> = ({ displayText }) => (
  <Ztext
    depth="25px"
    direction="both"
    event="none"
    eventRotation="30deg"
    eventDirection="default"
    fade={false}
    layers={20}
    perspective="100px"
  >
    {displayText}
  </Ztext>
);

export default ZtextWrapper;

そのため以下のようにRefを使って直接DOM操作をする必要がありました。
（もっといいやり方があるかもしれない・・・）

import { FC, useEffect, useRef } from 'react';
import Ztext from 'react-ztext';

const ZtextWrapper: FC<{
  displayText: string;
}> = ({ displayText }) => {
  const spanDom = useRef<HTMLSpanElement>(null);
  useEffect(() => {
    if (spanDom.current) {
      const nodeList = spanDom.current.querySelectorAll('div > span > span');
      Object.keys(nodeList).forEach((key) => {
        nodeList[Number(key)].innerHTML = displayText;
      });
    }
  }, [displayText]);

  return (
    <span ref={spanDom}>
      <Ztext
        depth="25px"
        direction="both"
        event="none"
        eventRotation="30deg"
        eventDirection="default"
        fade={false}
        layers={20}
        perspective="100px"
      >
        {displayText}
      </Ztext>
    </span>
  );
};

export default ZtextWrapper;