Implémentation de React tsparticles sur le site Web

React-tsparticles est une bibliothèque puissante qui vous permet d'ajouter des animations de particules personnalisables à vos applications React. Dans ce guide, nous passerons en revue le processus de mise en œuvre de React-tsparticles dans votre projet.
Installation
Tout d’abord, vous devez installer les packages nécessaires. Ouvrez votre terminal et exécutez la commande suivante :

npm install tsparticles @tsparticles/react

Cela installera à la fois la bibliothèque principale tsparticles et le wrapper React.
Création du composant Particules
Créez un nouveau fichier dans votre répertoire de composants, par exemple, Particle.js. Ce fichier contiendra la configuration de votre système de particules.
Voici le code du composant Particule :

import { useCallback, useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadFull } from "tsparticles";

export default function Particle() {
  const [init, setInit] = useState(false);

  useEffect(() => {
    console.log("init");
    initParticlesEngine(async (engine) => {
      await loadFull(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = (container) => {
    // You can add any logic here that should run when particles are loaded
  };

  return (
    <>
      {init && (
        <Particles
          id="tsparticles"
          particlesLoaded={particlesLoaded}
          style={{
            zIndex: 1,
          }}
          options={{
            fpsLimit: 120,
            interactivity: {
              events: {
                onClick: {
                  enable: true,
                  mode: "push",
                },
                onHover: {
                  enable: true,
                  mode: "repulse",
                },
                resize: true,
              },
              modes: {
                push: {
                  quantity: 4,
                },
                repulse: {
                  distance: 200,
                  duration: 0.4,
                },
              },
            },
            particles: {
              color: {
                value: "#bae6fd",
              },
              links: {
                color: "#e0f2fe",
                distance: 150,
                enable: true,
                opacity: 0.5,
                width: 1,
              },
              move: {
                direction: "none",
                enable: true,
                outModes: {
                  default: "bounce",
                },
                random: false,
                speed: 1.2,
                straight: false,
              },
              number: {
                density: {
                  enable: true,
                  area: 800,
                },
                value: 160,
              },
              opacity: {
                value: 0.5,
              },
              shape: {
                type: "circle",
              },
              size: {
                value: { min: 1, max: 5 },
              },
            },
            detectRetina: true,
          }}
        />
      )}
    </>
  );
}

Décomposons les éléments clés de ce composant :

Initialisation : Le hook useEffect initialise le moteur de particules lorsque le composant est monté.
Rendu : Le composant Particules n'est rendu qu'après l'initialisation (l'état init est vrai).
Configuration : La prop options du composant Particles contient toute la configuration du système de particules. Cela inclut les paramètres d'interactivité, l'apparence des particules, le mouvement et bien plus encore.
_
Utilisation du composant particule_
Pour utiliser ce composant dans votre application React, importez-le simplement et restituez-le là où vous souhaitez que les particules apparaissent. Par exemple, dans votre App.js :

import React from 'react';
import Particle from './components/Particle';

function App() {
  return (
    <div className="App">
      <Particle />
      {/* Your other components */}
    </div>
  );
}

export default App;

Personnalisation
L'objet options du composant Particule vous permet de personnaliser le comportement et l'apparence de vos particules. Voici quelques domaines clés que vous pouvez modifier :

• Couleur : modifiez la valeur color.value dans l'objet particules pour définir une couleur de particule différente.
• Forme : modifiez shape.type pour utiliser différentes formes de particules (par exemple, "carré", "triangle").
• Nombre : Ajustez number.value pour augmenter ou diminuer le nombre de particules.
• Mouvement : modifiez les paramètres de l'objet en mouvement pour modifier la façon dont les particules se déplacent.
• Interactivité : modifiez l'objet d'interactivité pour changer la façon dont les particules réagissent aux entrées de l'utilisateur.

Considérations relatives aux performances
Si les particules peuvent créer des effets visuels attrayants, elles peuvent également être gourmandes en ressources. Tenez compte des conseils suivants :

Limitez le nombre de particules pour de meilleures performances sur les appareils bas de gamme.
Utilisez l'option fpsLimit pour limiter la fréquence d'images.
Testez sur différents appareils pour garantir des performances fluides.
_
Conclusion_
React-tsparticles offre un moyen flexible d'ajouter des arrière-plans dynamiques et interactifs à vos applications React. En suivant ce guide, vous devriez maintenant avoir une implémentation fonctionnelle de tsparticles dans votre projet. Expérimentez avec différentes configurations pour créer l'effet de particules parfait pour votre application !
N'oubliez pas que la clé pour maîtriser les particules réactives est l'expérimentation. N'ayez pas peur de jouer avec différents réglages pour obtenir des effets uniques et captivants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!