Crea fantastiche dashboard in React utilizzando Tremor

Costruire un’interfaccia utente complessa in React, come una dashboard, può essere scoraggiante se lo fai da zero. Per fortuna, non devi farlo.

Una delle migliori librerie di componenti che puoi utilizzare è Tremor che ti consente di creare dashboard moderni e reattivi in ​​​​React con poco sforzo. Scopri come utilizzare Tremor per creare dashboard in React.

Cos’è il tremore?

Tremor è una libreria di componenti dell’interfaccia utente moderna, open source e di basso livello per la creazione di dashboard in React. Tremor si basa su Tailwind CSS, React e Recharts (un’altra libreria di grafici basata su componenti per React). Inoltre, utilizza le icone di Heroicons.

Vanta oltre 20 componenti con tutti gli elementi essenziali per creare una fantastica interfaccia analitica come grafici, schede ed elementi di input. La libreria include piccoli componenti modulari come badge, pulsanti, menu a discesa e schede, che puoi combinare per creare dashboard completi.

Ciò che distingue Tremor è che è molto supponente, quindi fintanto che sei d’accordo con le decisioni della biblioteca, puoi attivare una dashboard dall’aspetto professionale in un attimo.

Tremor supporta la personalizzazione, ovviamente, e lo rende facile tramite il sistema di oggetti di scena di React.

Come iniziare con il tremore

Inizia creando una nuova app React utilizzando il pacchetto create-react-app (o Vite se preferisci).

Dovrai avere già Node.js e npm installati sul tuo sistema. Puoi confermarlo eseguendo node –version e quindi npm –version su una riga di comando. Se manca uno dei comandi, puoi installarli utilizzando un semplice processo; consulta questa guida per l’installazione di Node.js e npm su Windows, ad esempio.

Impostare il tuo progetto React con Tremor

1. Apri il tuo terminale e vai alla tua directory preferita usando il comando cd .
2. Esegui npx create-react-app tremor-tutorial . Questo comando creerà una nuova applicazione React chiamata tremor-tutorial sul tuo sistema nella directory corrente.
3. Passa alla directory dell’app eseguendo cd tremor-tutorial .
4. Installa Tremor nel tuo progetto React usando il seguente comando: npm install @tremor/react
5. Dopo aver installato Tremor, importa il pacchetto nel tuo App.js (o main.jsx se hai usato Vite) aggiungendo la seguente riga in fondo alle tue importazioni: import "@tremor/react/dist/esm/tremor.css";

Sebbene Tremor utilizzi Tailwind CSS, non è necessario installarlo nella tua app React per utilizzare la libreria. Questo perché Tremor ha già impostato Tailwind internamente. Tuttavia, se lo desideri, dai un’occhiata al nostro tutorial sull’installazione di Tailwind CSS in React.

Quindi, installa Heroicons nel tuo progetto usando il seguente comando:

npm i heroicons@1.0.6 @tremor/react

Ora rimuoviamo il codice non necessario nel nostro file src/App.js . Ecco il nostro codice iniziale in App.js :

import "./App.css";
import "@tremor/react/dist/esm/tremor.css";
export default function App() {
  return (
    <div>
      <h1>Our Awesome React Dashboard</h1>
    </div>
  );
}


Successivamente, crea una sottocartella dedicata ai componenti nella cartella src . Nella cartella dei componenti , crea un nuovo file Dashboard.js e aggiungi il seguente codice:

function Dashboard() {
  return <div>Dashboard</div>;
}


export default Dashboard;


Importa il componente Dashboard in App.js aggiungendo la seguente istruzione dopo altre importazioni:

import Dashboard from "./components/Dashboard";


Infine, visualizza il componente nella tua app React aggiungendo <Dashboard /> sotto l’ elemento h1 .

Creazione di una dashboard con Tremor

Per creare una dashboard completa utilizzando Tremor, con il minimo sforzo, seleziona uno dei blocchi disponibili. I blocchi sono layout predefiniti costituiti da diversi piccoli componenti modulari.

Un buon punto di partenza è la sezione dei blocchi di Tremor che mostra diversi tipi di componenti di blocchi predefiniti che puoi utilizzare. Le shell di layout, ad esempio, consentono di mettere insieme diversi componenti per creare un dashboard.

Innanzitutto, aggiungi il seguente codice al tuo file Dashboard.js :

import {
  Card,
  Title,
  Text,
  ColGrid,
  AreaChart,
  ProgressBar,
  Metric,
  Flex,
} from "@tremor/react";


function Dashboard() {
  return (
    <main>
      <Title>Sales Dashboard</Title>
      <Text>This is a sample dashboard built with Tremor.</Text>

Il blocco shell contiene diversi componenti che importi nella parte superiore del file. Se lo visualizzi in anteprima nel tuo browser, vedrai solo due blocchi vuoti.

Puoi popolare i tuoi blocchi con i componenti predefiniti di Tremor, come un grafico, una scheda o una tabella. Puoi estrarre i dati da un’API (REST o GraphQL) o memorizzarli in un array di oggetti direttamente all’interno del tuo componente.

Per aggiungere un componente al tuo blocco shell, sostituisci la riga <div className=”h-96″/> con quanto segue:

<Title>Performance</Title>


<Text>Comparison between Sales and Profit</Text>

Successivamente, aggiungi il seguente array prima dell’istruzione return (questi sono i dati che verranno visualizzati nella sezione principale della dashboard):

// Data to display in the main section
const data = [
  {
    Month: "Jan 21",
    Sales: 2890,
    Profit: 2400,
  },
  {
    Month: "Feb 21",
    Sales: 1890,
    Profit: 1398,
  },
//. ..
  {
    Month: "Jan 22",
    Sales: 3890,
    Profit: 2980,
  },
];


const valueFormatter = (number) =>

Successivamente, aggiungi il seguente codice al tuo file dopo valueFormatter :

// Data to display in KPI section
const categories = [
  {
    title: "Sales",
    metric: "$ 12,699",
    percentageValue: 15.9,
    target: "$ 80,000",
  },
  {
    title: "Profit",
    metric: "$ 45,564",
    percentageValue: 36.5,
    target: "$ 125,000",
  },
  {
    title: "Customers",
    metric: "1,072",
    percentageValue: 53.6,
    target: "2,000",
  },
  {
    title: "Yearly Sales Overview",
    metric: "$ 201,072",
    percentageValue: 28.7,
    target: "$ 700,000",
  },
];


Per l’ array di categorie di oggetti, devi mappare ogni oggetto per visualizzare i dati in componenti Card separati. Innanzitutto, elimina il componente Card nella sezione KPI e poi sostituiscilo con questo codice:

{categories.map((item) => (
  <Card key={item.title}>
    <Text>{item.title}</Text>
    <Metric>{item.metric}</Metric>
    <Flex marginTop="mt-4">
      <Text
        truncate={true}
      >{`${item.percentageValue}% (${item.metric})`}</Text>


      <Text>{item.target}</Text>
    </Flex>

E questo è tutto. Hai creato la tua prima dashboard con Tremor. Visualizza la dashboard eseguendo npm start . Dovrebbe essere simile allo screenshot qui sopra.

Personalizzazione dei componenti del tremore

Tremor consente la personalizzazione utilizzando oggetti di scena. Dovrai rivedere la documentazione del componente che desideri personalizzare e controllare tutte le proprietà incluse con i loro valori predefiniti.

Ad esempio, se hai un <LineChart />, puoi nascondere l’asse x passando l’elica showXAxis={false} o modificare l’altezza usando height={h-40} . Per gli oggetti di scena che dichiarano i valori trovati in Tailwind CSS, come il dimensionamento, la spaziatura, i colori e il resto, devi usare le classi di utilità Tailwind.

Costruisci dashboard React complessi con facilità

Grazie a librerie di componenti come Tremor, non è necessario creare da zero ogni singola parte dell’interfaccia utente. L’utilizzo di una libreria come Tremor può farti risparmiare sia il tempo che il mal di testa della creazione di interfacce utente reattive complesse.