An input element that expands as you type into it

ExpandingInput.tsx

import { useEffect, useRef, useState } from "react";

export default function ExpandableInput(
  props: React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  >
) {
  const [value, setValue] = useState(props.value);
  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    setValue(props.value);
  }, [props.value]);

  useEffect(() => {
    if (inputRef.current) {
      const style = inputRef.current.style;

      style.width = "0";

      const desiredWidth = inputRef.current.scrollWidth;
      style.width = `${desiredWidth + inputRef.current.offsetWidth / 2}px`;
    }
  }, [value]);

  return (
    <input
      ref={inputRef}
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
      style={{ boxSizing: "border-box", ...(props.style || {}) }}
    />
  );
}