Typed.js Not Working Properly Glitching Text and Double Cursor in ReactJS

Question

I'm using Typed.js and It's not working working properly.
Typed.js showing double cursor and glitching the string array
It is difficult to figure out why causing this problem fact that I don't see anything wrong. You can see the code

import React from "react";
import Typed from "typed.js";

class SkillsList extends React.Component{
    componentDidMount(){
        new Typed('#skills', {
            strings: ['Front End Developer','Full Stack Developer', 'Chrome Extension Developer', 'Web Scraping and Automation', 'PHP Developer', 'Python Developer'],
            typeSpeed: 75,
            loop: true
        });
    }
    render(){
        return (
            <span id="skills"/>
        );
    }
    
}

export default SkillsList;

I've tried to search this issue But I can't find any thing that can help me

Answer 1

Your code is causing unnecessary re-renders, you should use ref to avoid it. Here you can see an react class component example using typed.js library (JSFiddle).

class TypedReactDemo extends React.Component {
  componentDidMount() {
    // If you want to pass more options as props, simply add
    // your desired props to this destructuring assignment.
    const { strings } = this.props;
    // You can pass other options here, such as typing speed, back speed, etc.
    const options = {
        strings: strings,
      typeSpeed: 50,
      backSpeed: 50
    };
    // this.el refers to the <span> in the render() method
    this.typed = new Typed(this.el, options);
  }

  componentWillUnmount() {
    // Make sure to destroy Typed instance on unmounting
    // to prevent memory leaks
    this.typed.destroy();
  }

  render() {
    return (
      <div className="wrap">
        <h1>Typed.js</h1>
        <div className="type-wrap">
          <span
            style={{ whiteSpace: 'pre' }}
            ref={(el) => { this.el = el; }}
          />
        </div>
        <button onClick={() => this.typed.toggle()}>Toggle</button>
        <button onClick={() => this.typed.start()}>Start</button>
        <button onClick={() => this.typed.stop()}>Stop</button>
        <button onClick={() => this.typed.reset()}>Reset</button>
        <button onClick={() => this.typed.destroy()}>Destroy</button>
      </div>
    );
  }
}

ReactDOM.render(
    <TypedReactDemo
    strings={[
        'Some <i>strings</i> are slanted',
      'Some <strong>strings</strong> are bold',
      'HTML characters &times; &copy;'
    ]}
  />,
  document.getElementById('react-root')
);