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.
Related videos on Youtube
Author by
JoVsn
Updated on June 04, 2022Comments
-
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 !</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 over 5 yearsThanks 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