Å bygge et komplekst brukergrensesnitt i React, som et dashbord, kan være skremmende hvis du gjør det fra bunnen av. Heldigvis trenger du ikke å gjøre det.

Et av de beste komponentbibliotekene du kan bruke er Tremor som lar deg lage moderne, responsive dashboards i React med liten innsats. Finn ut hvordan du bruker Tremor til å lage dashboards i React.

Hva er tremor?

Tremor er et moderne, åpen kildekode, lavnivå UI-komponentbibliotek for å bygge dashbord i React. Tremor bygger på toppen av Tailwind CSS, React og Recharts (et annet komponentbasert kartbibliotek for React). På toppen av det bruker den ikoner fra Heroicons.

Den har over 20 komponenter med alt det viktigste for å bygge et fantastisk analytisk grensesnitt som diagrammer, kort og inngangselementer. Biblioteket inkluderer små, modulære komponenter som merker, knapper, rullegardiner og faner, som du kan kombinere for å lage fullverdige instrumentbord.

Det som får Tremor til å skille seg ut, er at det er svært selvstendig, så så lenge du er i orden med bibliotekets avgjørelser, kan du fyre opp et profesjonelt utseende dashbord i en lek.

Tremor støtter selvfølgelig tilpasning, og gjør det enkelt å gjøre det via Reacts rekvisittsystem.

Hvordan komme i gang med tremor

Start med opprette en ny React-app bruker lag-reager-app pakke (eller Vite hvis det er det du foretrekker).

Du må allerede ha Node.js og npm installert på systemet ditt. Du kan bekrefte dette ved å kjøre node --versjon og så npm --versjon på en kommandolinje. Hvis en av kommandoene mangler, kan du installere dem ved hjelp av en enkel prosess; se denne veiledningen til installere Node.js og npm på Windows, for eksempel.

Sette opp React-prosjektet ditt med tremor

1. Åpne terminalen og naviger til den foretrukne katalogen ved å bruke cd kommando.
2. Løpe npx create-react-app tremor-tutorial. Denne kommandoen vil opprette en ny React-applikasjon kalt tremor-opplæring på systemet ditt i gjeldende katalog.
3. Bytt til appkatalogen ved å kjøre cd tremor-opplæring.
4. Installer Tremor i React-prosjektet ditt ved å bruke følgende kommando:

   npm installer @tremor/react

5. Når du har installert Tremor, importerer du pakken i din App.js (eller main.jsx hvis du brukte Vite) ved å legge til følgende linje nederst i importen:

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

Selv om Tremor bruker Tailwind CSS, trenger du ikke å installere den i React-appen din for å bruke biblioteket. Dette er fordi Tremor allerede har Tailwind satt opp internt. Men hvis du vil, sjekk veiledningen vår om installere Tailwind CSS i React.

Deretter installerer du Heroicons i prosjektet ditt ved å bruke følgende kommando:

npm i [email protected] @tremor/react

La oss nå fjerne unødvendig kode i vår src/App.js fil. Her er startkoden vår App.js:

import"./App.css";
import"@tremor/react/dist/esm/tremor.css";
eksportmisligholdefunksjonApp() {
komme tilbake (


Vårt Awesome React Dashboard</h1> 
 </div>
 );
}

Deretter oppretter du en dedikert komponenter undermappe i din src mappe. I det komponenter mappe, opprette en ny Dashboard.js fil og legg til følgende kode:

funksjonDashbord() {
komme tilbake<div>Dashborddiv>;
}
eksportmisligholde Dashbord;

Importer Dashboard-komponenten inn App.js ved å legge til følgende setning etter annen import:

import Dashbord fra"./components/Dashboard";

Til slutt, vis komponenten i React-appen din ved å legge til under h1 element.

Opprette et dashbord med tremor

For å lage et komplett dashbord med Tremor, med et minimum av oppstyr, velg en av de tilgjengelige blokkene. Blokker er forhåndsbygde layouter som består av forskjellige små modulære komponenter.

Et godt utgangspunkt er Tremors blokker seksjon som viser frem ulike typer forhåndsbygde blokkkomponenter som du kan bruke. Layout-skall lar deg for eksempel sette sammen forskjellige komponenter for å lage et dashbord.

Først legger du til følgende kode til din Dashboard.js fil:

import {
 Kort,
 Tittel,
 Tekst,
 ColGrid,
 AreaChart,
 ProgressBar,
 Metrikk,
 Flex,
} fra"@tremor/reager";
funksjonDashbord() {
komme tilbake (


 {/* Hovedseksjon */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI-delen */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Plassholder for å angi høyde */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
eksporter standard dashbord;
Skallblokken inneholder forskjellige komponenter som du importerer øverst i filen. Hvis du forhåndsviser dette i nettleseren din, vil du bare se to tomme blokker.
Du kan fylle blokkene dine med Tremors forhåndsbygde komponenter, som et diagram, kort eller tabell. Du kan hente data fra et API (REST eller GraphQL) eller lagre det i en rekke objekter rett inne i komponenten din.
For å legge til en komponent i skallblokken din, bytt ut 
 linje med følgende:
 
 
Etter at, legg til følgende matrise før retur-setningen (dette er dataene som dashbordets hoveddel vil vise):
 
 // Data som skal vises i de hovedseksjon
const data = [
 {
 Måned: "21. jan",
 Salg: 2890,
 Fortjeneste: 2400,
 },
 {
 Måned: "feb" 21",
 Salg: 1890,
 Fortjeneste: 1398,
 },
 // ...
 {
 Måned: "22. jan",
 Salg: 3890,
 Fortjeneste: 2980,
 },
];
const valueFormatter = (tall) =>< /span>
$ ${Intl.NumberFormat("oss").format (number).toString()};
Deretter legger du til følgende kode i filen din etter valueFormatter:
 
 // Data som skal vises i KPI seksjon
konst kategorier = [
 {
 tittel: "Salg",
 beregning: "$12 699",
 prosentverdi: 15,9,
 mål: "$ 80 000",
 },
 {
 tittel: "Profit",
 beregning: "$45,564" span>,
 prosentverdi: 36,5,
 mål: "$125 000",
 },
 {
 tittel: "Kunder",
 beregning: "1,072",
 prosentverdi:  53.6,
 mål: "2000",
 },
 {
 tittel: "Årlig salgsoversikt",
 beregning: "201 072 USD",
 prosentverdi: 28,7,
 mål: "$ 700 000",
 },
];
For kategorier med objekter, må du kartlegge gjennom hvert objekt for å vise dataene i separate kort-komponenter. Først sletter du kortkomponenten i KPI-delen og erstatter den med denne koden:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Tekst>
 {item.target}</Text>
 </Flex>
  percentageValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Og det er det. Du har laget ditt første dashbord med Tremor. Se oversikten din ved å kjøre npm start. Det skal være likt skjermbildet ovenfor.
 Tilpasse Tremor-komponenter
Tremor tillater tilpasning ved hjelp av rekvisitter. Du må se gjennom dokumentasjonen for komponenten du vil tilpasse og sjekke alle egenskapene som er inkludert med standardverdiene.
For eksempel, hvis du har et , kan du skjule x-aksen ved å passere propen showXAxis={false} eller endre høyden ved å bruke høyde={h-40}. For rekvisitter som erklærer verdier som finnes i Tailwind CSS, som størrelse, mellomrom, farger og resten, må du bruke Tailwind-verktøyklasser.
 Bygg komplekse React Dashboards enkelt
Takket være komponentbiblioteker som Tremor, trenger du ikke bygge alle enkelt del av brukergrensesnittet fra bunnen av. Å bruke et bibliotek som Tremor kan spare deg for både tid og hodepine ved å lage komplekse responsive brukergrensesnitt.