React-Particles Mouse Cursor Particle Cập Nhật Mới

To create a mouse cursor particle effect using the react-particles library, you can use the following steps:

1. Install the react-particles library by running the following command in your terminal:

npm install react-particles-js

1. Import the necessary components from the library in your React component:

jsx
import Particles from "react-particles-js";

1. Create a configuration object for the particles effect, specifying the properties of the particles such as size, color, shape, speed, and density. Here’s an example configuration object:

jsx
const particlesConfig = {
  particles: {
    number: {
      value: 50,
      density: {
        enable: true,
        value_area: 800,
      },
    },
    size: {
      value: 3,
    },
    color: {
      value: "#ffffff",
    },
    shape: {
      type: "circle",
    },
    line_linked: {
      enable: false,
    },
    move: {
      speed: 5,
    },
  },
  interactivity: {
    detectsOn: "window",
    events: {
      onhover: {
        enable: true,
        mode: "repulse",
      },
    },
    modes: {
      repulse: {
        distance: 100,
        duration: 0.4,
      },
    },
  },
};

1. In your component’s render method, add the Particles component and pass the configuration object as a prop. You can also wrap the Particles component with a div element to make it take up the full width and height of its parent element.

jsx
<div style={{ position: "relative" }}>
  <Particles params={particlesConfig} />
</div>

1. To create the mouse cursor particle effect, you can add a mousemove event listener to the parent element, and use the getBoundingClientRect method to get the position of the element relative to the viewport. You can then update the particlesConfig object to set the position of the mouse cursor as the center of the particles effect.

jsx
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });

const handleMouseMove = (e) => {
  const rect = e.currentTarget.getBoundingClientRect();
  setCursorPos({
    x: e.clientX - rect.left,
    y: e.clientY - rect.top,
  });
};

const updatedParticlesConfig = {
  ...particlesConfig,
  particles: {
    ...particlesConfig.particles,
    move: {
      ...particlesConfig.particles.move,
      attract: {
        enable: true,
        rotateX: 600,
        rotateY: 1200,
      },
      speed: 3,
    },
    number: {
      ...particlesConfig.particles.number,
      value: 20,
    },
    opacity: {
      value: 0.5,
    },
  },
  interactivity: {
    ...particlesConfig.interactivity,
    events: {
      onhover: {
        enable: false,
      },
    },
    modes: {
      bubble: {
        distance: 100,
        duration: 2,
        size: 40,
        opacity: 8,
      },
    },
  },
};

updatedParticlesConfig.particles.move.attract.rotateX = (cursorPos.x / window.innerWidth) * 1000 - 500;
updatedParticlesConfig.particles.move.attract.rotateY = (cursorPos.y / window.innerHeight) * 1000 - 500;

return (
  <div style={{ position: "relative" }} onMouseMove={handleMouseMove}>
    <Particles params={updatedParticlesConfig} />
  </div>
);