Reactでテキスト(text)と矩形(rect)のサイズの調和

テキストに合わせて矩形のサイズを変更し、また矩形に合わせてテキストを改行させます。
黄色の矩形の中の文字と、矩形の最小サイズ・最大サイズを変更できます。

---

text:
fontSize: UP DOWN
minWidth: UP DOWN
maxWidth: UP DOWN
=> rect size:

---

使い方

• text: 文字列を変更
• fontSize: フォントサイズを変更
• minWidth: 最小サイズを変更, このサイズより小さくなるときは強制的にこのサイズ
• minWidth: 最小サイズを変更, このサイズより大きくなるときは改行する
• rect size: 計算結果のサイズ

---

技術説明

• ReactのuseLayoutEffectを使い、textに合わせたrectを描いています。
• 詳細は、こちらに記載。