fitty を React で使う useFitty hook

fitty はコンテナに合わせてテキストのフォントサイズをフィットしてくれるライブラリです。
rikschennink/fitty: ✨ Makes text fit perfectly

それを React で使うための hooks を書いた。

Gist fitty for react

コード

import { useEffect, useRef } from 'react'
import fitty from 'fitty'

export function useFitty() {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!ref.current) return
    fitty(ref.current)
    //     ref.current.addEventListener('fit', (e) => {
    //       console.log(e)
    //     })
  }, [ref.current])
  return [ref] as const
}

呼び出し方

import React from 'react'

type Props = {}
function Component(props: Props) {
  const [divRef] = useFitty()
  return (
    <div ref={divRef} style={{ width: '100px' }}>
      Hello
    </div>
  )
}
export default Component

ただコンテナ側は縮小するときにリサイズしてくれないようです。