StretchTitle component

StretchTitle.jsx

/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import React, {useRef, useEffect, useState, useLayoutEffect} from "react"
import useComponentRect from "shared/hooks/useComponentRect"

const StretchTitle = (props) => {
  const containerRef = useRef();
  const textRef = useRef();
  const componentRect = useComponentRect(containerRef, 10);
  const [scale, setScale] = useState(1);
  const [height, setHeight] = useState();
  
  // calculate how much to scale the text by till it fits its container,
  // accounting for any scale already applied
  useLayoutEffect(() => {
    if (!componentRect) {
      return;
    }
    
    const textRect = textRef.current.getBoundingClientRect();

    let newScale = componentRect.width / (textRect.width / scale);
    // limit scale to maxScale 
    if (props.maxScale && props.maxScale < newScale){
      newScale = props.maxScale;
    }
    setScale(newScale);
    
  }, [containerRef, textRef, componentRect]);

  // update the height of the container when the scale changes
  useLayoutEffect(() => {
    const newTextRect = textRef.current.getBoundingClientRect();
    setHeight(newTextRect.height);
  }, [scale])

  return (
    <div ref={containerRef} css={css`
      height: ${height}px;
      width: 100%;
    `}>
      <span
        ref={textRef}
        css={(theme) => css`
          display: inline-block;
          white-space: nowrap;
          transform-origin: top left;
          transform: scale(${scale});
        `}
      >{props.children}</span>
    </div>
  );
}

export default StretchTitle;