React particles react

React particles js

yarn add react-particles-js

React particles react

import Particles from "react-tsparticles";

const App = () => {
  const particlesInit = (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
  };

  const particlesLoaded = (container) => {
    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: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40,
            },
            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: {
            direction: "none",
            enable: true,
            outMode: "bounce",
            random: false,
            speed: 6,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: "circle",
          },
          size: {
            random: true,
            value: 5,
          },
        },
        detectRetina: true,
      }}
    />
  );
};

Source: npmjs.com

Similar codes

0 vote252 views1 answer
How to check if we reach end of div react hooks
Javascript React
0 vote308 views1 answer
React unfocus check
Javascript React
0 vote243 views3 answers
React lifecycle hooks
Javascript React
0 vote244 views1 answer
How to add a key in a react element
Javascript React
0 vote264 views1 answer
React native unexpected token '<'
Javascript React
0 vote254 views1 answer
React Alert when rate changes
Javascript React
2 votes274 views1 answer
React strict mode
Javascript React
0 vote260 views1 answer
How to prevent previous radio button active react native
Javascript React
78 votes223 views6 answers
React router redirect
Javascript React
20 votes262 views4 answers
On enter key press react
Javascript React