Unexpected behaviors in React JS

[Rohith-JN]

I installed the library using this command npm install TagCloud --save-dev and because of a types error I imported it like this const TagCloud = require('TagCloud');. After running the react app multiple spheres appear.

And another problem is when I change the javascript it doesn't affect the sphere, also on every alternate reload it doesn't load

import React from 'react';
import './about.scss';

function About() {
  const TagCloud = require('TagCloud');

  const myTags = [
    'JavaScript',
    'CSS',
    'HTML',
    'Vscode',
    'XD',
    'React',
    'Python',
    'Linux',
    'git',
    'Flutter',
    'Dart',
    'Firebase',
    'SASS',
    'JSON',
    'Figma',
  ];

  TagCloud('.content', myTags, {
    radius: 250,
    maxSpeed: 'fast',
    initSpeed: 'fast',
    direction: 135,
    keep: true,
  });

  return (
    <div className="About" id="About">
      <div className="left">
        <div className="heading">
          <h1>ABOUT</h1>
        </div>
        <div className="para">
          <p>
            I am a high school student located in India, I am passionate about
            UI designing, android development, web development and automation.
          </p>
          <br></br>
          <p>
            Love automating daily boring tasks using python, Linux OS, gaming
            and in sports: football and badminton.
          </p>
          <br></br>
          <p>
            <a href="#Contact">Contact me</a>
          </p>
        </div>
      </div>
      <div className="right">
        <span className="content"></span>
      </div>
    </div>
  );
}

export default About;

[JorgeNava]

Facing same issue, several spheres appear with just one instance of TagCloud.

[JorgeNava]

Try removing the tag in the index.js file from the root path of your react project, that worked for me.

[Rohith-JN]

Oh for me this worked:

const IsTagCloudLoaded = useRef(false)

    useEffect(() => {
        if (IsTagCloudLoaded.current) return

        TagCloud('.content', Tags, {
            radius: 250,
            maxSpeed: 'fast',
            initSpeed: 'fast',
            direction: 135,
            keep: true,
        })

        IsTagCloudLoaded.current = true
    }, []) 

[JorgeNava]

Great, thanks. Should we close de Issue? I think it's more an issue with React rather than with the library

[Rohith-JN]

Agreed

[JorgeNava]

@Rohith-JN could you provide a more detailed code of how you've done it?

[Rohith-JN]

I actually got the solution to this problem from stack-overflow, I am not sure how it solved the problem, but if I am not wrong on first render it checks if a TagCloud exists or not. I used it here: my site This is the code

[JorgeNava]

Great, if it was the case that you had the code seriously I'll be very glad. Btw thats and awesome site, good job.

If it were the case that you had the code seriously, I would really appreciate it haha

El lun, 18 jul 2022 a las 9:28, Rohith JN @.***>) escribió:

I actually got the solution to this problem from stack-overflow, I am not sure how it solved the problem, but if I am not wrong on first render it checks if a TagCloud exists or not. I used it here: my site https://rohithnambiar.in

— Reply to this email directly, view it on GitHub https://github.com/cong-min/TagCloud/issues/16#issuecomment-1187569722, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF6WG36XI3H5IHOPFVQHVJDVUVSXZANCNFSM5WLUOSDA . You are receiving this because you commented.Message ID: @.***>