Particles doesn't show up in react-js

Question

This is my code in Particle.js

import React from "react";
import Particles from "react-tsparticles";

function Particle() {
  return (
    <Particles
      id="tsparticles"
      params={{
        particles: {
          number: {
            value: 160,
            density: {
              enable: true,
              value_area: 1500,
            },
          },
          line_linked: {
            enable: false,
            opacity: 0.03,
          },
          move: {
            direction: "right",
            speed: 0.05,
          },
          size: {
            value: 1,
          },
          opacity: {
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.05,
            },
          },
        },
        interactivity: {
          events: {
            onclick: {
              enable: true,
              mode: "push",
            },
          },
          modes: {
            push: {
              particles_nb: 1,
            },
          },
        },
        retina_detect: true,
      }}
    />
  );
}

export default Particle;

and I call particle in Home.js

import Particle from "../Particle";
import Button from 'react-bootstrap/Button';

function Home() {

  return (
    <div className="mt-5">
        <Particle/>
        <Button href="" target="_blank" className="register-btn-inner" size="lg">
          Register
        </Button>   
      </div>
    );
  }
  
  export default Home;

I checked a lot of same questions like particles.js not showing up in reactjs project and Particle.js not showing particles on ReactJS website but solutions don't help me at all. I searched a lot but I don't understand my mistake. why Particle doesn't work? I installed tsparticles and react-tsparticles libraries too.

Can you edit the post to include a more complete [mcve] enough for us to reproduce any issues? Could you try also creating a *running* [codesandbox](https://codesandbox.io/) demo that reproduces the issue for us to inspect live? Please also clarify in greater detail what exactly "particles doesn't show up" means. Are there errors? Have you inspected the DOM to see what is rendered? Installed package versions? Etc. — Drew Reese, Dec 07 '22 at 07:29
Did you see any errors in the console? If you did, please attach them to the question — hungdoansy, Dec 07 '22 at 10:52

score 0 · Accepted Answer · answered Dec 09 '22 at 18:26

You are missing the init attribute on the Particles component. It's visible in the documentation as well here

This is the documentation example:

import { useCallback } from "react";
import Particles from "react-particles";
import { loadFull } from "tsparticles";

const App = () => {
    const particlesInit = useCallback(async engine => {
        console.log(engine);
        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async container => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                background: {
                    color: {
                        value: "#0d47a1",
                    },
                },
                fpsLimit: 120,
                interactivity: {
                    events: {
                        onClick: {
                            enable: true,
                            mode: "push",
                        },
                        onHover: {
                            enable: true,
                            mode: "repulse",
                        },
                        resize: true,
                    },
                    modes: {
                        push: {
                            quantity: 4,
                        },
                        repulse: {
                            distance: 200,
                            duration: 0.4,
                        },
                    },
                },
                particles: {
                    color: {
                        value: "#ffffff",
                    },
                    links: {
                        color: "#ffffff",
                        distance: 150,
                        enable: true,
                        opacity: 0.5,
                        width: 1,
                    },
                    collisions: {
                        enable: true,
                    },
                    move: {
                        directions: "none",
                        enable: true,
                        outModes: {
                            default: "bounce",
                        },
                        random: false,
                        speed: 6,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                            area: 800,
                        },
                        value: 80,
                    },
                    opacity: {
                        value: 0.5,
                    },
                    shape: {
                        type: "circle",
                    },
                    size: {
                        value: { min: 1, max: 5 },
                    },
                },
                detectRetina: true,
            }}
        />
    );
};

Particles doesn't show up in react-js

1 Answers1