Untitled

import React, { useEffect, useRef } from "react";
import TypeIt from "typeit";

const TypeItComponent: React.FC = () => {
  const typeElementRef = useRef<HTMLDivElement | null>(null);
  const hiddenElementRef = useRef<HTMLDivElement | null>(null);

  const updateElementHeight = () => {
    if (hiddenElementRef.current && typeElementRef.current) {
      const updatedFullHeight = hiddenElementRef.current.offsetHeight;
      typeElementRef.current.style.height = `${updatedFullHeight}px`;
    }
  };

  useEffect(() => {
    const text = typeElementRef.current?.innerHTML || "";

    if (hiddenElementRef.current) {
      hiddenElementRef.current.innerHTML = text;
      const fullHeight = hiddenElementRef.current.offsetHeight;
      if (typeElementRef.current) {
        typeElementRef.current.style.height = `${fullHeight}px`;
      }
    }

    new TypeIt(typeElementRef.current, {
      speed: 5,
      waitUntilVisible: true,
      cursor: false,
      html: true,
      loop: false,
      afterComplete: () => updateElementHeight(),
      beforeStep: () => updateElementHeight(),
    }).go();

    window.addEventListener("resize", updateElementHeight);

    return () => {
      window.removeEventListener("resize", updateElementHeight);
    };
  }, []);

  return (
    <>
      <div id="type-element" ref={typeElementRef}>
        Your text goes here...
      </div>
      <div
        id="type-hidden-element"
        ref={hiddenElementRef}
        style={{ visibility: "hidden", position: "absolute", zIndex: -1 }}
      />
    </>
  );
};

export default TypeItComponent;