¿Cómo usar Particles.js en React Project?

Particles.js es un complemento de JavaScript receptivo, liviano y sin dependencias para partículas flexibles y reactivas como el diseño que se ve así.

Podemos agregar Particles.js en nuestro proyecto de reacción usando react-particles . Agregar esto a su proyecto de reacción seguramente atraerá a más audiencias.

1. Proceso de instalación: ejecute el siguiente comando en la terminal para instalar Particles.js

• Para npm:

  npm install react-particles-js

• Para hilo:

  yarn add react-particles-js

2. Importe los paquetes: Importe el paquete en su archivo. Para importar el paquete pegue el siguiente código:

import Particles from 'react-particles-js';

3. Render: dentro del retorno de la función de renderizado de su componente, agregue el elemento <particles />. Algunos accesorios importantes son:

• ancho: Ancho del lienzo.
• Alto: Alto del Lienzo.
• Params: Parámetro a pasar.

Ejemplo:

// Complete React Code
import React from 'react';
import './App.css';
import Particles from 'react-particles-js';
   
function App() {
  return (
    <div className="App">
      By Ankit Bansal
      <Particles
        params={{
          particles: {
            number: {
              value: 200,
              density: {
                enable: true,
                value_area: 1000,
              }
            },
          },
        }}
      />
   
    </div>
  );
}
   
export default App;

4. Inicie Inicie el npm usando npm startel comando y obtendrá un gran fondo atractivo.

Nota: Agregue el elemento <particles /> como el último elemento en su div de retorno.