Construire une interface utilisateur complexe dans React, comme un tableau de bord, peut être intimidant si vous le faites à partir de zéro. Heureusement, vous n'avez pas à le faire.

L'une des meilleures bibliothèques de composants que vous pouvez utiliser est Tremor qui vous permet de créer des tableaux de bord modernes et réactifs dans React avec peu d'effort. Découvrez comment utiliser Tremor pour créer des tableaux de bord dans React.

Qu'est-ce qu'un tremblement ?

Tremor est une bibliothèque de composants d'interface utilisateur moderne, open source et de bas niveau pour la création de tableaux de bord dans React. Tremor s'appuie sur Tailwind CSS, React et Recharts (une autre bibliothèque de graphiques basée sur des composants pour React). En plus de cela, il utilise des icônes de Heroicons.

Il contient plus de 20 composants avec tous les éléments essentiels pour créer une interface analytique fantastique comme des graphiques, des cartes et des éléments d'entrée. La bibliothèque comprend de petits composants modulaires tels que des badges, des boutons, des listes déroulantes et des onglets, que vous pouvez combiner pour créer des tableaux de bord complets.

Ce qui distingue Tremor, c'est qu'il est très opiniâtre, donc tant que vous êtes d'accord avec les décisions de la bibliothèque, vous pouvez lancer un tableau de bord d'aspect professionnel en un clin d'œil.

Tremor prend en charge la personnalisation, bien sûr, et le rend facile à faire via le système d'accessoires de React.

Comment démarrer avec le tremblement

Commence par créer une nouvelle application React en utilisant le créer-réagir-app package (ou Vite si c'est ce que vous préférez).

Vous devez déjà avoir installé Node.js et npm sur votre système. Vous pouvez le confirmer en exécutant noeud --version et puis npm --version sur une ligne de commande. Si l'une ou l'autre commande est manquante, vous pouvez les installer en utilisant un processus simple; voir ce guide pour installation de Node.js et npm sous Windows, Par exemple.

Configuration de votre projet React avec Tremor

1. Ouvrez votre terminal et accédez à votre répertoire préféré à l'aide du CD commande.
2. Courir npx créer-réagir-app tremblement-tutoriel. Cette commande créera une nouvelle application React appelée tremblement-tutoriel sur votre système dans le répertoire courant.
3. Basculez vers le répertoire de l'application en exécutant cd tremblement-tutoriel.
4. Installez Tremor dans votre projet React à l'aide de la commande suivante:

   npm installer @tremor/react

5. Une fois que vous avez installé Tremor, importez le package dans votre App.js (ou main.jsx si vous avez utilisé Vite) en ajoutant la ligne suivante en bas de vos importations:

   importer"@tremor/react/dist/esm/tremor.css";

Bien que Tremor utilise Tailwind CSS, vous n'avez pas besoin de l'installer dans votre application React pour utiliser la bibliothèque. En effet, Tremor a déjà configuré Tailwind en interne. Cependant, si vous le souhaitez, consultez notre tutoriel sur installation de Tailwind CSS dans React.

Ensuite, installez Heroicons dans votre projet à l'aide de la commande suivante :

npm i [email protected] @tremor/react

Maintenant, supprimons le code inutile dans notre src/App.js déposer. Voici notre code de démarrage dans App.js:

importer"./App.css";
importer"@tremor/react/dist/esm/tremor.css";
exporterdéfautfonctionApplication() {
retour (


Notre super tableau de bord React</h1> 
 </div>
 );
}

Ensuite, créez un espace dédié Composants sous-dossier dans votre src dossier. Dans ce Composants dossier, créez un nouveau Tableau de bord.js fichier et ajoutez le code suivant :

fonctionTableau de bord() {
retour<div>Tableau de borddiv>;
}
exporterdéfaut Tableau de bord;

Importez le composant Dashboard dans App.js en ajoutant l'instruction suivante après les autres importations :

importer Tableau de bord depuis"./composants/Tableau de bord";

Enfin, affichez le composant dans votre application React en ajoutant sous le h1 élément.

Créer un tableau de bord avec Tremor

Pour créer un tableau de bord complet à l'aide de Tremor, en toute simplicité, sélectionnez l'un des blocs disponibles. Les blocs sont des mises en page prédéfinies composées de différents petits composants modulaires.

Un bon point de départ est Blocs de tremblement section qui présente différents types de composants de blocs prédéfinis que vous pouvez utiliser. Les coques de mise en page, par exemple, vous permettent d'assembler différents composants pour créer un tableau de bord.

Tout d'abord, ajoutez le code suivant à votre Tableau de bord.js déposer:

importer {
 Carte,
 Titre,
 Texte,
 ColGrid,
 AreaChart,
 Barre de progression,
 Métrique,
 Fléchir,
} depuis"@tremblement/réagir";
fonctionTableau de bord() {
retour (


 {/* Section principale */}
 "mt-6">
 
"h-96" /> 
 </Carte>
 {/* Section KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Espace réservé pour définir la hauteur */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exporter par défaut Tableau de bord ;
Le bloc shell contient différents composants qui vous importez en haut du fichier. Si vous prévisualisez ceci dans votre navigateur, vous ne verrez que deux blocs vides.
Vous pouvez remplir vos blocs avec les composants prédéfinis de Tremor, comme un graphique, une carte ou un tableau. Vous pouvez extraire des données d'une API (REST ou GraphQL) ou les stocker dans un tableau d'objets directement à l'intérieur de votre composant.
Pour ajouter un composant à votre bloc shell, remplacez le 
 par la ligne suivante :
 
 
Après cela, ajoutez le tableau suivant avant votre instruction return (il s'agit des données que la section principale du tableau de bord affichera) :
 
 // Données à afficher dans le section principale
const data = [
 {
 Mois: "Jan 21",
 Ventes: 2 890,
 Bénéfice: 2 400,
 },
 {
 Mois: "Fév. 21",
 Ventes: 1 890,
 Bénéfice: 1 398,
 },
 // ...
 {
 Mois: "22 janvier",
 Ventes: 3890,
 Bénéfice: 2 980,
 },
] ;
const valueFormatter = (nombre) =>< /span>
$ ${International.NumberFormat("us").format (number).toString()} ;
Ensuite, ajoutez le code suivant à votre fichier après valueFormatter :
 
 // Données à afficher dans le KPI section
const categories = [
 {
 titre: "Ventes",
 métrique: "12 699 $",
 valeur en pourcentage: 15,9,
 cible: "$ 80 000",
 },
 {
 titre: "Profit",
 métrique: "$ 45 564" span>,
 valeur en pourcentage: 36,5,
 objectif: "125 000 $",
 },
 {
 titre: "Clients",
 statistique: "1 072",
 pourcentageValeur:  53,6,
 cible: "2 000",
 },
 {
 titre: "Aperçu des ventes annuelles",
 métrique: "201 072 $",
 valeur en pourcentage: 28,7,
 cible: "700 000 $",
 },
] ;
Pour le tableau d'objets categories, vous devez mapper chaque objet pour afficher les données dans des composants Card distincts. Tout d'abord, supprimez le composant Carte dans la section KPI, puis remplacez-le par ce code :
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Texte>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Et c'est tout. Vous avez créé votre premier tableau de bord avec Tremor. Affichez votre tableau de bord en exécutant npm start. Cela devrait ressembler à la capture d'écran ci-dessus.
 Personnalisation des composants Tremor
Tremor permet la personnalisation à l'aide d'accessoires. Vous devrez consulter la documentation du composant que vous souhaitez personnaliser et vérifier toutes les propriétés incluses avec leurs valeurs par défaut.
Par exemple, si vous avez un , vous pouvez masquer l'axe des x en passant la prop showXAxis={false} ou modifier la hauteur en utilisant hauteur={h-40}. Pour les props déclarant des valeurs trouvées dans Tailwind CSS, comme le dimensionnement, l'espacement, les couleurs et le reste, vous devez utiliser les classes utilitaires Tailwind.
 
 Créez facilement des tableaux de bord React complexes
 
Grâce aux bibliothèques de composants comme Tremor, vous n'avez pas besoin de créer tous seule partie de votre interface utilisateur à partir de zéro. L'utilisation d'une bibliothèque comme Tremor peut vous faire gagner du temps et des maux de tête liés à la création d'interfaces utilisateur complexes et réactives.