How to use javascript in react component

15,101

Change the script to this:

var TxtRotate = function (el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function () {
    that.tick();
  }, delta);
};

loadCall = function () {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #725070 }";
  document.body.appendChild(css);
};

const loadMyScript = () => window.addEventListener('load', () => loadCall());

export default loadMyScript;

Then import loadMyScript and call loadMyScript() from the componentDidMount() function within your component.

Share:
15,101

Related videos on Youtube

JoVsn
Author by

JoVsn

Updated on June 04, 2022

Comments

  • JoVsn
    JoVsn almost 2 years

    I'm working on a React component and I found a specific javascript code that modify the content of my html page. The problem is that I don't know how to merge this script into my component. I know I can call it with an "import" statement but the script works with a "window.onload" function that will be called only one time, but my component is mounted several times and the script won't work anymore

    The Component -

    import React, { Component } from 'react';
    import textRotation from '../../scripts/textRotation';
    import './Main.scss';
    
    
    class Main extends Component {
      constructor(props) {
        super(props);
        this.title = props.title;
        this.imgSrc = props.imgSrc;
      }
    
      render() {
        return (
          <div className="Main">
            <div className="main-content">
              <div className="presentation-caption">
                <span>Hello, I'm Jordan, a junior front-end developer, who does a lot of things.</span>
              </div>
              <div className="description-caption">
                <span>Prepare you to encounter various types of projects... but it's ok, just explore&nbsp;!</span>
              </div>
              <div className="button-container">
                <a href="#works"><button>Scroll down</button></a>
              </div>
            </div>
            <div className="side-content">
              <span
                className="txt-rotate"
                data-period="1100"
                data-rotate='[ "Web development", "Video editing", "Motion design", "Graphism", "Creativity" ]'></span><span>.</span>
            </div>
            <div className="side-text-portfolio">
              <span>ポ<br />ー<br />ト<br />フ<br />ォ<br />リ<br />オ</span>
            </div>
          </div>
        );
      }
    }
    
    export default Main;
    

    The script -

    var TxtRotate = function (el, toRotate, period) {
      this.toRotate = toRotate;
      this.el = el;
      this.loopNum = 0;
      this.period = parseInt(period, 10) || 2000;
      this.txt = '';
      this.tick();
      this.isDeleting = false;
    };
    
    TxtRotate.prototype.tick = function () {
      var i = this.loopNum % this.toRotate.length;
      var fullTxt = this.toRotate[i];
    
      if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
      } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
      }
    
      this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
    
      var that = this;
      var delta = 300 - Math.random() * 100;
    
      if (this.isDeleting) { delta /= 2; }
    
      if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
      } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
      }
    
      setTimeout(function () {
        that.tick();
      }, delta);
    };
    
    window.onload = function () {
      var elements = document.getElementsByClassName('txt-rotate');
      for (var i = 0; i < elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-rotate');
        var period = elements[i].getAttribute('data-period');
        if (toRotate) {
          new TxtRotate(elements[i], JSON.parse(toRotate), period);
        }
      }
      // INJECT CSS
      var css = document.createElement("style");
      css.type = "text/css";
      css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #725070 }";
      document.body.appendChild(css);
    };
    

    If you have any solutions for adding the script into my Component, or the properly reload it ... thanks by advance

  • JoVsn
    JoVsn over 5 years
    Thanks for the help, I applied the code you gave me plus a modification given in the comment left by @tenor528 : I call the function "loadCall" each time in the componentDidMount function and this now works