sigit.io/src/hooks/useScale.tsx

import { useEffect, useState } from 'react'
import { singletonHook } from 'react-singleton-hook'
import { getInnerContentWidth } from '../utils/pdf'

const noScaleInit = {
  to: (_: number, v: number) => v,
  from: (_: number, v: number) => v
}

const useScaleImpl = () => {
  const [width, setWidth] = useState(getInnerContentWidth())

  // Get the scale based on the original width
  const scale = (originalWidth: number) => {
    return width / originalWidth
  }

  // Get the original pixel value
  const to = (originalWidth: number, value: number) => {
    return value / scale(originalWidth)
  }

  // Get the scaled pixel value
  const from = (originalWidth: number, value: number) => {
    return value * scale(originalWidth)
  }

  const resize = () => {
    setWidth(getInnerContentWidth())
  }

  useEffect(() => {
    resize()

    window.addEventListener('resize', resize)
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [])

  return { to, from }
}

export const useScale = singletonHook(noScaleInit, useScaleImpl, {
  unmountIfNoConsumers: true
})