1

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

tkamath99
  • 629
  • 1
  • 12
  • 32
  • In the CodeSandbox sample you are using an old version of `react-particles-js`, `tsparticles` is a dependency starting from 3.x version of `react-particles-js`. If you want to be sure you can use `react-tsparticles` with the same `tsparticles` version – Caelan Feb 06 '21 at 09:21
  • @Caelan You have example for using tsparticles in react ? – tkamath99 Feb 07 '21 at 09:17
  • https://codesandbox.io/s/react-tsparticles-dw43f https://github.com/tsparticles/react-landing-page-template https://github.com/tsparticles/react-auth-template These are some samples – Caelan Feb 07 '21 at 09:45

0 Answers0