At bygge en kompleks brugergrænseflade i React, som et dashboard, kan være skræmmende, hvis du gør det fra bunden. Heldigvis behøver du ikke gøre det.

Et af de bedste komponentbiblioteker, du kan bruge, er Tremor, som giver dig mulighed for at skabe moderne, responsive dashboards i React med en lille indsats. Find ud af, hvordan du bruger Tremor til at oprette dashboards i React.

Hvad er tremor?

Tremor er et moderne, open source, lav-niveau UI-komponentbibliotek til at bygge dashboards i React. Tremor bygger oven på Tailwind CSS, React og Recharts (et andet komponentbaseret diagrambibliotek til React). Oven i købet bruger den ikoner fra Heroicons.

Det kan prale af over 20 komponenter med alt det væsentlige til at bygge en fantastisk analytisk grænseflade som diagrammer, kort og inputelementer. Biblioteket indeholder små, modulære komponenter som badges, knapper, dropdowns og faner, som du kan kombinere for at skabe fuldgyldige dashboards.

Det, der får Tremor til at skille sig ud, er, at det er meget holdningsfuldt, så så længe du er okay med bibliotekets beslutninger, kan du tænde et professionelt udseende dashboard i en leg.

Tremor understøtter selvfølgelig tilpasning og gør det nemt at gøre det via Reacts rekvisitter-system.

Sådan kommer du i gang med tremor

Start med oprettelse af en ny React-app bruger opret-reager-app pakke (eller Vite, hvis det er det, du foretrækker).

Du skal allerede have Node.js og npm installeret på dit system. Du kan bekræfte dette ved at køre node --version og så npm --version på en kommandolinje. Hvis en af ​​kommandoerne mangler, kan du installere dem ved hjælp af en simpel proces; se denne guide til installation af Node.js og npm på Windows, for eksempel.

Opsætning af dit React-projekt med Tremor

1. Åbn din terminal og naviger til din foretrukne mappe ved hjælp af cd kommando.
2. Løb npx create-react-app tremor-tutorial. Denne kommando vil oprette en ny React-applikation kaldet tremor-tutorial på dit system i den aktuelle mappe.
3. Skift til app-biblioteket ved at køre cd tremor-tutorial.
4. Installer Tremor i dit React-projekt ved hjælp af følgende kommando:

   npm installer @tremor/react

5. Når du har installeret Tremor, skal du importere pakken i din App.js (eller main.jsx hvis du brugte Vite) ved at tilføje følgende linje i bunden af ​​dine importer:

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

Selvom Tremor bruger Tailwind CSS, behøver du ikke installere det i din React-app for at bruge biblioteket. Dette skyldes, at Tremor allerede har Tailwind opsat internt. Men hvis du vil, så tjek vores tutorial om installation af Tailwind CSS i React.

Installer derefter Heroicons i dit projekt ved hjælp af følgende kommando:

npm i [email protected] @tremor/react

Lad os nu fjerne unødvendig kode i vores src/App.js fil. Her er vores startkode App.js:

importere"./App.css";
importere"@tremor/react/dist/esm/tremor.css";
eksportStandardfungereApp() {
Vend tilbage (


Vores Awesome React Dashboard</h1> 
 </div>
 );
}

Dernæst skal du oprette en dedikeret komponenter undermappe i din src folder. I det komponenter mappe, skal du oprette en ny Dashboard.js fil og tilføj følgende kode:

fungereDashboard() {
Vend tilbage<div>Dashboarddiv>;
}
eksportStandard Dashboard;

Importer Dashboard-komponenten ind App.js ved at tilføje følgende erklæring efter anden import:

importere Dashboard fra"./components/Dashboard";

Til sidst skal du vise komponenten i din React-app ved at tilføje under h1 element.

Oprettelse af et Dashboard med Tremor

For at oprette et komplet dashboard ved hjælp af Tremor, med et minimum af besvær, skal du vælge en af ​​de tilgængelige blokke. Blokke er præbyggede layouts, der består af forskellige små modulære komponenter.

Et godt udgangspunkt er Tremors blokke sektion, som viser forskellige typer præbyggede blokkomponenter, som du kan bruge. Layoutskaller lader dig for eksempel sammensætte forskellige komponenter for at skabe et dashboard.

Først skal du tilføje følgende kode til din Dashboard.js fil:

importere {
 Kort,
 Titel,
 Tekst,
 ColGrid,
 AreaChart,
 ProgressBar,
 Metrisk,
 Flex,
} fra"@tremor/reager";
fungereDashboard() {
Vend tilbage (


 {/* Hovedsektion */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI-sektion */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Pladsholder til at indstille højden */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
eksporter standard Dashboard;
Shell-blokken indeholder forskellige komponenter, der du importerer øverst i filen. Hvis du forhåndsviser dette i din browser, vil du kun se to tomme blokke.
Du kan udfylde dine blokke med Tremors forudbyggede komponenter, såsom et diagram, kort eller tabel. Du kan trække data fra en API (REST eller GraphQL) eller gemme dem i en række objekter lige inde i din komponent.
For at tilføje en komponent til din shell-blok skal du erstatte 
 linje med følgende:
 
 
Efter at tilføje følgende array før din retur-sætning (dette er de data, som dashboardets hovedsektion vil vise):
 
 // Data, der skal vises i det hovedafsnit
const data = [
 {
 Måned: "21. jan",
 Salg: 2890,
 Fortjeneste: 2400,
 },
 {
 Måned: "Febr. 21",
 Salg: 1890,
 Fortjeneste: 1398,
 },
 // ...
 {
 Måned: "22. jan",
 Salg: 3890,
 Fortjeneste: 2980,
 },
];
const valueFormatter = (tal) =>< /span>
$ ${Intl.NumberFormat("os").format (number).toString()};
Føj derefter følgende kode til din fil efter valueFormatter:
 
 // Data, der skal vises i KPI sektion
konst kategorier = [
 {
 title: "Salg",
 metric: "$12.699",
 procentværdi: 15,9,
 mål: "$ 80.000",
 },
 {
 titel: "Profit",
 metric: "45.564 USD" span>,
 procentværdi: 36,5,
 mål: "125.000 USD",
 },
 {
 title: "Kunder",
 metric: "1.072",
 procentværdi:  53.6,
 mål: "2.000",
 },
 {
 titel: "Årlig salgsoversigt",
 metric: "201.072 USD",
 procentværdi: 28,7,
 mål: "$700.000",
 },
];
For kategorier af objekter, skal du kortlægge gennem hvert objekt for at vise dataene i separate Kort-komponenter. Først skal du slette kortkomponenten i KPI-sektionen og derefter erstatte den med denne kode:
 
 {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 var det. Du har oprettet dit første dashboard med Tremor. Se dit betjeningspanel ved at køre npm start. Det skal ligne skærmbilledet ovenfor.
 Tilpasning af Tremor-komponenter
Tremor tillader tilpasning ved hjælp af rekvisitter. Du skal gennemgå dokumentationen for den komponent, du vil tilpasse, og kontrollere alle de egenskaber, der er inkluderet med deres standardværdier.
F.eks. hvis du har et , kan du skjule x-aksen ved at sende prop showXAxis={false} eller ændre højden vha. højde={h-40}. For rekvisitter, der erklærer værdier fundet i Tailwind CSS, såsom størrelse, mellemrum, farver og resten, skal du bruge Tailwind-værktøjsklasser.
 Byg komplekse React Dashboards med lethed
Takket være komponentbiblioteker som Tremor behøver du ikke bygge alle enkelt del af din brugergrænseflade fra bunden. Ved at bruge et bibliotek som Tremor kan du spare både tid og hovedpine ved at skabe komplekse responsive brugergrænseflader.