🦔

fitty を React で使う useFitty hook

2021/09/18に公開

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

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

GitHubで編集を提案

Discussion