Skapa fantastiska instrumentpaneler i React med hjälp av Tremor

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 proffsigt utseende på en bris.

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 install @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 ner i dina importer:

    import "@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 heroicons@1.0.6 @tremor/react

Låt oss nu ta bort onödig kod i vår src/App.js fil. Här är vår startkod 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> 
  ); 
} 

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

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

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

 import Dashboard from "./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.

hur spelar du på xbox one

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

 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> 
 
      {/* Main section */} 
      <Card marginTop="mt-6"> 
        <div className="h-96" /> 
      </Card> 
 
      {/* KPI section */} 
      <ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6"> 
        <Card> 
          {/* Placeholder to set height */} 
          <div className="h-28" /> 
        </Card> 
      </ColGrid> 
    </main> 
  ); 
} 
 
export default Dashboard; 
 

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 bord. Du kan hämta data från ett API (REST eller GraphQL) eller lagra det i en array av objekt precis inuti din komponent.

För att lägga till en komponent till ditt skalblock, byt ut

 <Title>Performance</Title> 
 
<Text>Comparison between Sales and Profit</Text> 
 
<AreaChart 
  marginTop="mt-4" 
  data={data} 
  categories={["Sales", "Profit"]} 
  dataKey="Month" 
  colors={["indigo", "fuchsia"]} 
  valueFormatter={valueFormatter} 
  height="h-80" 
/> 
 

 // 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) => 
 
$ ${Intl.NumberFormat("us").format(number).toString()}; 
 

 // 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", 
  }, 
]; 
 

 {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> 
 
    <ProgressBar 
      percentageValue={item.percentageValue} 
      marginTop="mt-2" 
    /> 
  </Card> 
))}