title: How to use javascript in react component
body: <p>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</p>
  
  <p>The Component -</p>
  
  <pre><code>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 (
        &lt;div className="Main"&gt;
          &lt;div className="main-content"&gt;
            &lt;div className="presentation-caption"&gt;
              &lt;span&gt;Hello, I'm Jordan, a junior front-end developer, who does a lot of things.&lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="description-caption"&gt;
              &lt;span&gt;Prepare you to encounter various types of projects... but it's ok, just explore&amp;nbsp;!&lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="button-container"&gt;
              &lt;a href="#works"&gt;&lt;button&gt;Scroll down&lt;/button&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="side-content"&gt;
            &lt;span
              className="txt-rotate"
              data-period="1100"
              data-rotate='[ "Web development", "Video editing", "Motion design", "Graphism", "Creativity" ]'&gt;&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;
          &lt;/div&gt;
          &lt;div className="side-text-portfolio"&gt;
            &lt;span&gt;ポ&lt;br /&gt;ー&lt;br /&gt;ト&lt;br /&gt;フ&lt;br /&gt;ォ&lt;br /&gt;リ&lt;br /&gt;オ&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Main;
  </code></pre>
  
  <p>The script -</p>
  
  <pre><code>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 = '&lt;span class="wrap"&gt;' + this.txt + '&lt;/span&gt;';
  
    var that = this;
    var delta = 300 - Math.random() * 100;
  
    if (this.isDeleting) { delta /= 2; }
  
    if (!this.isDeleting &amp;&amp; this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting &amp;&amp; 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 &lt; 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 &gt; .wrap { border-right: 0.08em solid #725070 }";
    document.body.appendChild(css);
  };
  </code></pre>
  
  <p>If you have any solutions for adding the script into my Component, or the properly reload it ... thanks by advance</p>