ScaleButtons.js

type Props = {
  labels: string[];
}

const ScaleButtons = ({labels}:Props) => {
  const [isCalculating, setIsCalculating] = useState<boolean>(true);
  const [width, setWidth] = useState<number>(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setWidth(node.getBoundingClientRect().width);
    }

    return setIsCalculating(false);
  }, []);

  const getBiggerTextWidth = () => {
    return labels.reduce((acc, cur) => {
      if (cur.label.length >= acc.length) {
        return cur.label;
      }

      return acc;
    }, '');
  };

  if (isCalculating) {
    const biggestText = getBiggerTextWidth();
    return <span ref={measuredRef}>{biggestText}</span>;
  }

  const range = labels.length;

  const renderLabel = (position: number) => {
    return labels[position];
  };

  const renderButton = (position: number) => {
    return (
      <Button
        key={position}
        width={width}
      >
        {renderLabel(position)}
      </Button>
    );
  };

  return (
    <Flex>
      {range.map((_, index) => renderButton(index))}
    </Flex>
  );
}