📝

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

2021/07/27に公開2

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>
  );
};

以上!

Discussion

たふみたふみ

はじめまして.いつもTwitterなど参考にさせていただいています!

たぶんこの用途は見出しで使うことが主だとおもうので,あまり気にすることはないかと思いますが,.split('')を使うと絵文字を使った場合に壊れてしまうので,代わりにspread構文で

-      {text.split("").map((char, index) => (
+      {[...text].map((char, index) => (

を使うのがおすすめです!

ただ👨‍👩‍👧‍👧のような書記素クラスタ単位で分割する必要のある絵文字についてはこれでは対応できないので,
https://www.npmjs.com/package/graphemesplit
この辺のライブラリを使うしかなさそうですね…

seyaseya

なるほど、そんな落とし穴が…ありがとうございます!!