React で簡単に文字詰めするためのコンポーネント ReactMojizume を作った

React で文字詰めをしたかったのでそのためのコンポーネントを作りました。

https://gist.github.com/kazuyaseki/2b0c64ec0f209e04f00fc7d52f994b0a

やっていることは非常に単純で、text として受け取ったものを一個一個 span で包んで個別に letterSpacing をあてているだけです。

type Props = {
  as?: React.ElementType;
  className?: string;
  text: string;
  letterSpacings: string[];
};

const ReactMojizume: React.VFC<Props> = ({
  as,
  className,
  text,
  letterSpacings,
}) => {
  const CustomTag = (as || "p") as keyof JSX.IntrinsicElements;

  return (
    <CustomTag className={className}>
      {[...text].map((char, index) => (
        <span style={{ letterSpacing: letterSpacings[index] }} key={index}>
          {char}
        </span>
      ))}
    </CustomTag>
  );
};

以上！