Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unexpected behaviors in React JS

See original GitHub issue

Issue Description

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;

Issue Analytics

State:
Created 9 months ago
Comments:8

Top GitHub Comments

1reaction

JorgeNavacommented, Jul 17, 2022

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

1reaction

Rohith-JNcommented, Jul 17, 2022

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
    }, [])