Att bygga ett komplext användargränssnitt i React, som en instrumentpanel, kan vara skrämmande om du gör det från grunden. Tack och lov behöver du inte göra det.

Ett av de bästa komponentbiblioteken du kan använda är Tremor som låter dig skapa moderna, lyhörda instrumentpaneler i React med liten ansträngning. Ta reda på hur du använder Tremor för att skapa instrumentpaneler i React.

Vad är tremor?

Tremor är ett modernt, öppen källkod, lågnivå UI-komponentbibliotek för att bygga instrumentpaneler i React. Tremor bygger ovanpå Tailwind CSS, React och Recharts (ett annat komponentbaserat kartbibliotek för React). Utöver det använder den ikoner från Heroicons.

Den har över 20 komponenter med alla nödvändigheter för att bygga ett fantastiskt analytiskt gränssnitt som diagram, kort och inmatningselement. Biblioteket innehåller små, modulära komponenter som märken, knappar, rullgardinsmenyer och flikar, som du kan kombinera för att skapa fullfjädrade instrumentpaneler.

Det som gör att Tremor sticker ut är att det är mycket åsiktsfullt, så så länge du är okej med bibliotekets beslut, kan du tända en instrumentbräda med ett professionellt utseende.

Tremor stödjer förstås anpassning och gör det enkelt att göra det via Reacts rekvisitasystem.

Hur man kommer igång med tremor

Börja med skapa en ny React-app använda skapa-reagera-app paket (eller Vite om det är vad du föredrar).

Du måste redan ha Node.js och npm installerade på ditt system. Du kan bekräfta detta genom att köra nod --version och då npm --version på en kommandorad. Om något av kommandona saknas kan du installera dem med en enkel process; se den här guiden till installera Node.js och npm på Windows, till exempel.

Konfigurera ditt React-projekt med Tremor

1. Öppna din terminal och navigera till din föredragna katalog med hjälp av CD kommando.
2. Springa npx create-react-app tremor-tutorial. Detta kommando kommer att skapa en ny React-applikation som kallas tremor-handledning på ditt system i den aktuella katalogen.
3. Växla till appkatalogen genom att köra handledning för cd tremor.
4. Installera Tremor i ditt React-projekt med följande kommando:

   npm installera @tremor/react

5. När du har installerat Tremor, importera paketet i din App.js (eller main.jsx om du använde Vite) genom att lägga till följande rad längst ned i dina importer:

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

Även om Tremor använder Tailwind CSS, behöver du inte installera det i din React-app för att använda biblioteket. Detta beror på att Tremor redan har Tailwind inställt internt. Men om du vill, kolla in vår handledning om installerar Tailwind CSS i React.

Installera sedan Heroicons i ditt projekt med följande kommando:

npm i [email protected] @tremor/reagera

Låt oss nu ta bort onödig kod i vår src/App.js fil. Här är vår startkod App.js:

importera"./App.css";
importera"@tremor/react/dist/esm/tremor.css";
exporterastandardfungeraApp() {
lämna tillbaka (


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

Skapa sedan en dedikerad komponenter undermapp i din src mapp. I den komponenter mapp, skapa en ny Dashboard.js fil och lägg till följande kod:

fungerainstrumentbräda() {
lämna tillbaka<div>instrumentbrädadiv>;
}
exporterastandard Instrumentbräda;

Importera Dashboard-komponenten till App.js genom att lägga till följande uttalande efter andra importer:

importera instrumentbräda från"./components/Dashboard";

Till sist, visa komponenten i din React-app genom att lägga till under h1 element.

Skapa en instrumentpanel med tremor

För att skapa en komplett instrumentpanel med hjälp av Tremor, med ett minimum av krångel, välj ett av de tillgängliga blocken. Block är förbyggda layouter som består av olika små modulära komponenter.

En bra utgångspunkt är Tremors block avsnitt som visar upp olika typer av förbyggda blockkomponenter som du kan använda. Layoutskal låter dig till exempel sätta ihop olika komponenter för att skapa en instrumentpanel.

Lägg först till följande kod till din Dashboard.js fil:

importera {
 Kort,
 Titel,
 Text,
 ColGrid,
 AreaChart,
 ProgressBar,
 Metrisk,
 Böja,
} från"@tremor/reagera";
fungerainstrumentbräda() {
lämna tillbaka (


 {/* Huvudsektion */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI-avsnitt */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Platshållare för att ställa in höjd */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exportera standard instrumentpanel;
Skalblocket innehåller olika komponenter som du importerar överst i filen. Om du förhandsgranskar detta i din webbläsare kommer du bara att se två tomma block.
Du kan fylla dina block med Tremors förbyggda komponenter, som ett diagram, kort eller tabell. Du kan hämta data från ett API (REST eller GraphQL) eller lagra det i en array av objekt direkt inuti din komponent.
För att lägga till en komponent till ditt skalblock, ersätt 
 rad med följande:
 
 
Efter att lägga till följande array före ditt return-uttryck (detta är data som instrumentpanelens huvudsektion kommer att visa):
 
 // Data som ska visas i de huvudsektion
const data = [
 {
 Månad: "21 jan",
 Försäljning: 2890,
 Vinst: 2400,
 },
 {
 Månad: "feb" 21",
 Försäljning: 1890,
 Vinst: 1398,
 },
 // ...
 {
 Månad: "22 jan",
 Försäljning: 3890,
 Vinst: 2980,
 },
];
const valueFormatter = (nummer) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Lägg sedan till följande kod i din fil efter valueFormatter:
 
 // Data att visa i KPI avsnitt
konst kategorier = [
 {
 title: "Försäljning",
 statistik: "$12 699",
 procentvärde: 15,9,
 mål: "$ 80 000",
 },
 {
 title: "Profit",
 statistik: "$45,564" span>,
 procentvärde: 36,5,
 mål: "125 000 USD",
 },
 {
 title: "Kunder",
 mätvärde: "1 072",
 procentvärde:  53.6,
 mål: "2 000",
 },
 {
 titel: "Årlig försäljningsöversikt",
 statistik: "201 072 USD",
 procentvärde: 28,7,
 mål: "$700 000",
 },
];
För kategorier av objekt, måste du mappa genom varje objekt för att visa data i separata Kort-komponenter. Ta först bort kortkomponenten i KPI-avsnittet och ersätt den sedan med denna kod:
 
 {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>
))}
Och det var allt. Du har skapat din första instrumentpanel med Tremor. Visa din instrumentpanel genom att köra npm start. Det bör likna skärmdumpen ovan.
 Anpassa Tremor-komponenter
Tremor tillåter anpassning med hjälp av rekvisita. Du måste granska dokumentationen för den komponent du vill anpassa och kontrollera alla egenskaper som ingår med deras standardvärden.
Till exempel, om du har ett  kan du dölja x-axeln genom att passera stödet showXAxis={false} eller ändra höjden med höjd={h-40}. För rekvisita som deklarerar värden som finns i Tailwind CSS, som storlek, avstånd, färger och resten, måste du använda Tailwind-verktygsklasser.
 Bygg komplexa React Dashboards med lätthet
Tack vare komponentbibliotek som Tremor behöver du inte bygga alla en del av ditt användargränssnitt från grunden. Genom att använda ett bibliotek som Tremor kan du spara både tid och huvudvärk för att skapa komplexa responsiva användargränssnitt.