Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear upon webpage reload.
Despite exploring resources like this video tutorial in attempts to resolve the problem, the sphere still vanishes after reloading the page. On another note, making edits to my TextSphere component while the react app is running results in an unexpected duplicate of the text sphere appearing on the webpage. Below, I will provide my code for reference. Thank you in advance for any assistance.
react js component:
import React, { useEffect }from "react";
import TagCloud from "TagCloud";
const TextSphere = () => {
useEffect(() => {
return () => {
const container = ".tagcloud";
const texts = [
'JavaScript',
'CSS',
'HTML',
'C',
'C++',
'React',
'Python',
'Java',
'MySQL',
'jQuery',
];
const options = {
radius: 300,
maxSpeed: "normal",
initSpeed: "normal",
keep: true,
};
TagCloud(container, texts, options);
};
}, []);
return (
<div className="text-sphere">
<span className="tagcloud"></span>
</div>
);
};
export default TextSphere;
CSS file -
.text-sphere {
position: relative;
top: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tagcloud {
display: inline-block;
top: 0;
left: 0;
font-weight: 600;
letter-spacing: 0.0625em;
font-size: 1.3em;
}
.tagcloud--item {
color: black;
text-transform: uppercase;
}
.tagcloud--item:hover {
color: rgb(224, 167, 101);
}