あのぞんブログ

fitty を React で使う useFitty hook

2021-06-14

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

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

Gist

コード

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

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


© 2021 あのぞんびより All Rights Reserved