React v18 Autosize Input

InputAutosize.tsx

// Learn more: https://dev.to/zechdc/autosize-input-field-plain-js-and-react-examples-38kb

import { cn } from "~/lib/shadcnui";

interface InputAutosizeProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  value: string;
}

export default function InputAutosize({
  className,
  value,
  ...props
}: InputAutosizeProps) {
  return (
    <div className={cn("grid", className)}>
      <span className="invisible" style={{ gridArea: " 1 / 1 " }}>
        {!value && "\u00A0"}
        {value.replace(/ /g, "\u00A0")}
      </span>
      <input
        size={1}
        style={{ gridArea: " 1 / 1 " }}
        type="text"
        value={value}
        className={`border-none bg-transparent focus:outline-none`}
        {...props}
      />
    </div>
  );
}