javascript - Adding TSParticles params in React Particle

Question

I am trying to replicate ts particle params to use in React particles. I used the same params what are working in tsparticles, But in React it is not getting displayed. Here are the below config params for both TsParticle and React Particle.

TSParticles

particles: {
    number: { value: 10, density: { enable: true, value_area: 9999999 } },
    color: { value: "#ffffff" },
    shape: {
      type: "square",
      stroke: { width: 0, color: "#000000" },
      image: { src: "img/github.svg", width: 50, height: 50 }
    },
    opacity: {
      value: 1,
      random: true,
      anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
    },
    size: {
      value: 3,
      random: true,
      anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
    },
    line_linked: {
      enable: false,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 0.5,
      direction: "bottom-right",
      random: true,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: { enable: false, rotateX: 600, rotateY: 600 }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      resize: true
    },
    modes: {
      grab: { distance: 191.80819180819182, line_linked: { opacity: 1 } },
      bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
      repulse: { distance: 695.3046953046953, duration: 0.4 },
      push: { particles_nb: 4 },
      remove: { particles_nb: 2 }
    }
  },

React Particles

particles: {
      number: { value: 10, density: { enable: true, value_area: 99999 } },
      color: { value: "#ffffff" },
      shape: {
        type: "square",
        stroke: { width: 0, color: "#000000" },
        image: { src: "img/github.svg", width: 50, height: 50 }
      },
      opacity: {
        value: 1,
        random: true,
        anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
      },
      size: {
        value: 3,
        random: true,
        anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
      },
      move: {
        enable: true,
        speed: 0.5,
        direction: "top-left",
        random: true,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: { enable: false, rotateX: 600, rotateY: 600 }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          resize: true
        }
      },
    },

Link for both TsParticles and React Particles

TSParticle

React Particle

question from:https://stackoverflow.com/questions/66066102/adding-tsparticles-params-in-react-particle

Answer 1

Waitting for answers