Vanilla JavaScript to React Class/Component

Question

I am new to react and this is my first site and I have some plan JavaScript I found online that will allow a word to be typed out and updated over a course of time. I have already made it into a react Component. But I am not sure how to covert this JavaScript Function into react code.

Here is my new React Component.

import React, {Component} from 'react';

class Hero extends Component {
    render () {
        return (
           <div>
            <section id="hero" className="d-flex flex-column justify-content-center align-items-center">
                <div className="hero-container" data-aos="fade-in">
                    <h1>Augusto J. Rodriguez</h1>
                    <p>I'm a <span className="typed" data-typed-items="opption1, opption2, opption3, opption4"></span></p>
                </div>
            </section>
           </div>  
        );
    }
}

export default Hero;

Here is the vanilla JavaScript that I want to use in my code. Currently this is living in my main.js file that is being called from the index.html. this is the only part of the code that is not working.

  if ($('.typed').length) {
    var typed_strings = $('.typed').data('typed-items');
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 2000
    });
  }

I am assuming I need to create a function where my

tag is.But I am not sure how to do that in React.

any article references would be awesome or tips on how to resolve this. I have the full code for this project on GitHub .

Answer 1

Looks like that piece of code is using a library called Typed.js.

From looking at your project, I see you setup the Typed.js library inside your public/assets/vendor folder. Instead I would recommend using the NPM package manager to install and setup Typed.js, and copy over the code to work the React way. https://github.com/mattboldt/typed.js/ .

Here's an example using Typed.js with React. https://jsfiddle.net/mattboldt/ovat9jmp/

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')
);

Answer 2

It looks like currently you're using the 'typed' library to create this typed list. There are some community packages that act as React wrappers for that, like this one:

https://www.npmjs.com/package/react-typed

Alternatively, you could do what that library does yourself, by loading the 'typed' package in a call to componentDidMount, passing in a React ref instead of a DOM element.

By the way, currently your code uses jQuery (assigned to the variable $) so it's not quite vanilla JS. You could replace the calls to $ with calls to document.querySelector, to make this vanilla JS (though your code might depend on jQuery elsewhere)