Het bouwen van een complexe gebruikersinterface in React, zoals een dashboard, kan ontmoedigend zijn als je het helemaal opnieuw doet. Gelukkig hoeft u dit niet te doen.

Een van de beste componentenbibliotheken die u kunt gebruiken, is Tremor, waarmee u met weinig moeite moderne, responsieve dashboards in React kunt maken. Ontdek hoe je Tremor gebruikt om dashboards te maken in React.

Wat is tremor?

Tremor is een moderne, open-source, low-level UI-componentenbibliotheek voor het bouwen van dashboards in React. Tremor bouwt voort op Tailwind CSS, React en Recharts (een andere op componenten gebaseerde kaartbibliotheek voor React). Bovendien gebruikt het iconen van Heroicons.

Het beschikt over meer dan 20 componenten met alle benodigdheden voor het bouwen van een fantastische analytische interface zoals grafieken, kaarten en invoerelementen. De bibliotheek bevat kleine, modulaire componenten zoals badges, knoppen, vervolgkeuzemenu's en tabbladen, die u kunt combineren om volwaardige dashboards te maken.

Wat Tremor onderscheidt, is dat het zeer eigenwijs is, dus zolang je het eens bent met de beslissingen van de bibliotheek, kun je in een handomdraai een professioneel ogend dashboard opstarten.

Tremor ondersteunt natuurlijk maatwerk en maakt het gemakkelijk om dit te doen via het rekwisietensysteem van React.

Hoe te beginnen met tremor

Start op een nieuwe React-app maken de... gebruiken maak-reageer-app pakket (of Vite als je daar de voorkeur aan geeft).

U moet Node.js en npm al op uw systeem hebben geïnstalleerd. U kunt dit bevestigen door te rennen knooppunt --versie en dan npm --versie op een opdrachtregel. Als een van beide commando's ontbreekt, kunt u ze op een eenvoudige manier installeren; zie deze handleiding Node.js en npm installeren op Windows, Bijvoorbeeld.

Uw React-project opzetten met tremor

1. Open uw terminal en navigeer naar uw gewenste map met behulp van de CD commando.
2. Loop npx create-react-app tremor-tutorial. Met deze opdracht wordt een nieuwe React-toepassing gemaakt met de naam tremor-zelfstudie op uw systeem in de huidige map.
3. Schakel over naar de app-directory door te rennen cd tremor-tutorial.
4. Installeer Tremor in uw React-project met behulp van de volgende opdracht:

   npm install @tremor/reageren

5. Nadat u Tremor hebt geïnstalleerd, importeert u het pakket in uw App.js (of main.jsx als je Vite hebt gebruikt) door de volgende regel toe te voegen onderaan je invoer:

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

Hoewel Tremor Tailwind CSS gebruikt, hoeft u deze niet in uw React-app te installeren om de bibliotheek te gebruiken. Dit komt omdat Tremor Tailwind al intern heeft ingesteld. Als je echter wilt, bekijk dan onze tutorial op Tailwind CSS installeren in React.

Installeer vervolgens Heroicons in uw project met behulp van de volgende opdracht:

npm i [email protected] @tremor/react

Laten we nu onnodige code in ons src/App.js bestand. Hier is onze startcode binnen App.js:

importeren"./App.css";
importeren"@tremor/react/dist/esm/tremor.css";
exporterenstandaardfunctieapp() {
opbrengst (


Ons Awesome React-dashboard</h1> 
 </div>
 );
}

Maak vervolgens een speciaal componenten submap in uw src map. In dat componenten map, maak een nieuwe Dashboard.js bestand en voeg de volgende code toe:

functieDashboard() {
opbrengst<div>Dashboarddiv>;
}
exporterenstandaard Dashboard;

Importeer de Dashboard-component in App.js door de volgende verklaring toe te voegen na andere invoer:

importeren Dashboard van"./componenten/Dashboard";

Geef ten slotte het onderdeel weer in uw React-app door toe te voegen onder de h1 element.

Een dashboard maken met tremor

Om met een minimum aan gedoe een compleet dashboard te maken met Tremor, selecteert u een van de beschikbare blokken. Blokken zijn vooraf gebouwde lay-outs die zijn samengesteld uit verschillende kleine modulaire componenten.

Een goed uitgangspunt is Tremor's blokken gedeelte waarin verschillende soorten vooraf gebouwde blokcomponenten worden getoond die u kunt gebruiken. Met lay-outshells kunt u bijvoorbeeld verschillende componenten samenvoegen om een ​​dashboard te maken.

Voeg eerst de volgende code toe aan uw Dashboard.js bestand:

importeren {
 Kaart,
 Titel,
 Tekst,
 ColGrid,
 Vlakgrafiek,
 Voortgangsbalk,
 Metriek,
 Buigen,
} van"@tremor/reageren";
functieDashboard() {
opbrengst (

 {/* Hoofdsectie */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI-sectie */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Placeholder om hoogte in te stellen */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exporteren standaard dashboard;
Het shellblok bevat verschillende componenten die u importeert bovenaan het bestand. Als u hiervan een voorbeeld bekijkt in uw browser, ziet u slechts twee lege blokken.
U kunt uw blokken vullen met de kant-en-klare componenten van Tremor, zoals een diagram, kaart of tabel. U kunt gegevens ophalen uit een API (REST of GraphQL) of deze opslaan in een reeks objecten binnen uw component.
Om een ​​component aan uw shell-blok toe te voegen, vervangt u de 
 regel met het volgende:
 
 
Na dat, voeg de volgende array toe vóór uw return-instructie (dit zijn de gegevens die in het hoofdgedeelte van het dashboard worden weergegeven):
 
 // Gegevens om weer te geven in de hoofdsectie
const data = [
 {
 Maand: "Jan 21",
 Verkoop: 2890,
 Winst: 2400,
 },
 {
 Maand: "feb 21",
 Verkoop: 1890,
 Winst: 1398,
 },
 // ...
 {
 Maand: "Jan 22",
 Verkoop: 3890,
 Winst: 2980,
 },
];
const valueFormatter = (getal) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Voeg vervolgens de volgende code toe aan uw bestand na valueFormatter:
 
 // Gegevens om weer te geven in KPI sectie
const categorieën = [
 {
 titel: "Verkoop",
 statistiek: "$ 12.699",
 percentageValue: 15,9,
 target: "$ 80.000",
 },
 {
 title: "Winst",
 statistiek: "$ 45.564" span>,
 percentageValue: 36,5,
 doel: "$ 125.000",
 },
 {
 title: "Klanten",
 statistiek: "1.072",
 percentageValue:  53,6,
 doel: "2000",
 },
 {
 titel: 'Jaarlijks verkoopoverzicht',
 statistiek: '$ 201.072',
 percentageValue: 28,7,
 doel: "$ 700.000",
 },
];
Voor de categorieën reeks objecten, moet u elk object doorzoeken om de gegevens in afzonderlijke Kaart-componenten weer te geven. Verwijder eerst de kaartcomponent in de KPI-sectie en vervang deze vervolgens door deze code:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  percentageValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
En dat is alles. Je hebt je eerste dashboard gemaakt met Tremor. Bekijk uw dashboard door npm start uit te voeren. Het zou vergelijkbaar moeten zijn met het bovenstaande screenshot.
 Tremor-componenten aanpassen
Tremor maakt aanpassing mogelijk met behulp van rekwisieten. U moet de documentatie bekijken van de component die u wilt aanpassen en alle eigenschappen controleren met hun standaardwaarden.
Bijvoorbeeld, als u een  heeft, kunt u de x-as verbergen door de prop showXAxis={false} door te geven of de hoogte wijzigen met hoogte={h-40}. Voor rekwisieten die waarden declareren die gevonden zijn in Tailwind CSS, zoals formaat, spatiëring, kleuren en de rest, moet u Tailwind-hulpprogrammaklassen gebruiken.
Bouw complexe React-dashboards met gemak
Dankzij componentenbibliotheken zoals Tremor hoeft u niet elke onderdeel van uw gebruikersinterface helemaal opnieuw. Het gebruik van een bibliotheek zoals Tremor kan u zowel de tijd als de hoofdpijn besparen bij het maken van complexe responsieve gebruikersinterfaces.