Inter dynamic tracking as a React component

DynamicText.jsx

// https://rsms.me/inter/dynmetrics

const DynamicText = ({ className, children, fontSize = 15, tag = "span" }) => {
  const pxToRem = (px) => {
    return Number(px * 0.0625)
  }

  const dynamicLeading = (z) => {
    const l = 1.4
    return Number(pxToRem(Math.round(z * l)))
  }

  const dynamicTracking = (z) => {
    const a = -0.0223
    const b = 0.185
    const c = -0.1745
    return Number((a + b * Math.pow(Math.E, c * z)).toFixed(3))
  }

  const Tag = tag

  return (
    <Tag
      className={className}
      style={{
        fontFamily: "Inter, sans-serif",
        fontSize: `${pxToRem(fontSize)}rem`,
        lineHeight: `${dynamicLeading(fontSize)}rem`,
        letterSpacing: `${dynamicTracking(fontSize)}em`
      }}
    >
      {children}
    </Tag>
  )
}