how to hide the cursor when the sentence finishes

[UfukTanriverdi8]

import Typewriter from 'typewriter-effect'
import { useState } from 'react'

const Header = ( ) => {
    const [showCursor, setShowCursor] = useState(true)
    return (
          <Typewriter
            onInit={(typewriter) => {
              typewriter.typeString('this is a title')
              .pauseFor(300)
              .deleteChars(5)
              .typeString('<strong style="color: #e21936;">title</strong>')
              .pauseFor(1000)
              .callFunction(()=>setShowCursor(false)) // Hide cursor after typing
              .start()
            } } options={{
              delay: 'natural',
              cursor: showCursor ? "|" : "",
            }}
  />

tried something like this. but whenever i try to change the cursor property dynamically, the whole text just disappears.

[SarikaRamamoorthy]

This is a temporary fix, but it hides the cursor entirely, and just types the characters

import Typewriter from 'typewriter-effect'

const Header = ( ) => {
    return (
          <Typewriter
            onInit={(typewriter) => {
              typewriter.typeString('this is a title')
              .pauseFor(300)
              .deleteChars(5)
              .typeString('<strong style="color: #e21936;">title</strong>')
              .pauseFor(1000)
              .start()
            } } options={{
              delay: 'natural',
              cursor: "",
            }}
  />

[Gerald-Hu]

You may substitute the typewriter instance with another element that contains the same contents.

<div className="flex w-full px-6">
  {!typewriterFinished ?
    <Typewriter
      onInit={(typewriter) => {
        typewriter.typeString(quote)
          .pauseFor(300)
          .callFunction(() => {
            setTypewriterFinished(true);
          })
          .start()
      }} options={{
        delay: 'natural',
        cursor: '|',
        wrapperClassName: "text-blue-300"
      }}
    />
    :
    <div>
      {quote}
    </div>
  }
</div>

Changing the prop passed to the instance (as you did) will hide the whole block, and this is a quick workaround :)