Implémentation de composants squelettes dans React / Blogs / Perficient

Dans notre dernier blog, nous avons abordé le concept de ce qu’est un composant squelette dans React. Nous allons maintenant continuer à implémenter le composant squelette dans React.

Le composant prend en charge 4 variantes de forme :

• texte(par défaut) : représente une seule ligne de texte (vous pouvez ajuster la hauteur via la taille de la police).
• circulaire, rectangulaireet arrondi: livré avec un rayon de bordure différent pour vous permettre de prendre le contrôle de la taille.

Implémentation de composants squelettes

Commençons par créer un composant squelette.

Étape 1:

Vous devrez installer le module @mui/material dans votre projet React.

npm installer @mui/matériel

npm je @emotion/react @emotion/styled

Étape 2:

Nous allons créer un composant squelette pour le texte. Ouvrez le fichier App.js et ajoutez le code ci-dessous

import { Skeleton } from "@mui/material";
import React from "react";
  
export default function App() {
    return (
        <div>
            <h4>
                Skeleton component for Text
            </h4>
            <Skeleton variant="text" width={200} height={50} />
        </div>
    );
}

Ici, nous pouvons ajouter de la largeur et de la hauteur pour le squelette. Le résultat sera comme ceci :

De même pour les variantes de composants Rectangle, Cercle et Arrondi, nous pouvons ajouter du code squelette comme ci-dessous.

Créons maintenant un composant squelette pour les données en temps réel. Pour cela, nous utiliserons un plugin React, React-content-loader.

Maintenant, qu’est-ce que React-Content-Loader ?

chargeur de contenu de réaction est une bibliothèque de composants React utilisée pour créer des états de chargement d’espaces réservés, souvent appelés « écrans squelettes » ou « chargeurs de squelettes ». La bibliothèque fournit un ensemble de composants personnalisables qui imitent la structure de votre contenu réel lors de son chargement. Cela permet de conserver la mise en page globale d’une page et offre une meilleure expérience utilisateur par rapport à un espace vide ou vide.

Voici un exemple basique d’utilisation chargeur de contenu de réaction:

Étape 1: npm installe réagir-content-loader

Étape 2: Créez un fichier SkeletonComponent.js et ajoutez le code ci-dessous

import React from 'react';
import ContentLoader from 'react-content-loader';

const SkeletonComponent = () => (
  <ContentLoader
    speed={4}
    width={400}
    height={200}
    viewBox="0 0 400 200"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb">

    <rect x="0" y="0" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="20" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="40" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="60" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="80" rx="3" ry="3" width="400" height="10" />
    <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
    {/* Add more shapes as needed */}
  </ContentLoader>
  
);

export default SkeletonComponent;

Étape 3: Créez un fichier sous le nom DataList.js et ajoutez le code ci-dessous

import React, { useState, useEffect } from 'react';
import SkeletonComponent from './SkeletonComponent';

const DataList = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <SkeletonComponent />
      ) : (
        <ul>
          {data?.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DataList;

Étape 4: Dans App.js, ajoutez le code ci-dessous

import React from 'react';
import DataList from './DataList';

const App = () => {
  return (
    <div>
      <h1>Data List</h1>
      <DataList />
    </div>
  );
};

export default App;

De cette façon, nous pouvons utiliser l’outil React-Content-Loader pour améliorer l’expérience utilisateur en fournissant une représentation visuelle du chargement du contenu.

En utilisant un composant squelette, les applications React peuvent gérer les états de chargement avec élégance, contribuant ainsi à une interface plus attrayante et conviviale.

Merci d’avoir lu !!!