Crie painéis impressionantes em React usando o Tremor

Construir uma interface de usuário complexa no React, como um painel, pode ser assustador se você estiver fazendo isso do zero. Felizmente, você não precisa fazer isso.

Uma das melhores bibliotecas de componentes que você pode usar é a Tremor, que permite criar painéis modernos e responsivos no React com pouco esforço. Descubra como usar o Tremor para criar painéis no React.

O que é tremor?

O Tremor é uma biblioteca de componentes de interface do usuário moderna, de código aberto e de baixo nível para criar painéis no React. Tremor se baseia em Tailwind CSS, React e Recharts (outra biblioteca de gráficos baseada em componentes para React). Além disso, ele usa ícones de Heroicons.

Possui mais de 20 componentes com todos os elementos essenciais para construir uma interface analítica fantástica, como gráficos, cartões e elementos de entrada. A biblioteca inclui componentes pequenos e modulares, como emblemas, botões, menus suspensos e guias, que você pode combinar para criar painéis completos.

O que faz o Tremor se destacar é que ele é altamente opinativo, então, desde que você esteja de acordo com as decisões da biblioteca, você pode abrir um painel de aparência profissional rapidamente.

O Tremor oferece suporte à personalização, é claro, e facilita isso por meio do sistema de props do React.

wi-fi não tem uma configuração válida

Como começar com Tremor

Começar por criando um novo aplicativo React usando o criar-reagir-aplicativo pacote (ou Vite se preferir).

Você precisará ter Node.js e npm instalados em seu sistema. Você pode confirmar isso executando nó --versão e então npm --versão em uma linha de comando. Se algum dos comandos estiver ausente, você poderá instalá-los usando um processo simples; veja este guia para instalando Node.js e npm no Windows , por exemplo.

Configurando seu projeto React com o Tremor

1. Abra seu terminal e navegue até o diretório de sua preferência usando o cd comando.
2. Corre npx create-react-app tremor-tutorial . Este comando criará um novo aplicativo React chamado tremor-tutorial em seu sistema no diretório atual.
3. Alterne para o diretório do aplicativo executando cd tremor-tutorial .
4. Instale o Tremor em seu projeto React usando o seguinte comando:

    npm install @tremor/react

5. Depois de instalar o Tremor, importe o pacote em seu App.js (ou main.jsx se você usou Vite) adicionando a seguinte linha na parte inferior de suas importações:

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

Embora Tremor use Tailwind CSS, você não precisa instalá-lo em seu aplicativo React para usar a biblioteca. Isso ocorre porque o Tremor já tem o Tailwind configurado internamente. No entanto, se você quiser, confira nosso tutorial sobre instalando Tailwind CSS no React .

Em seguida, instale Heroicons em seu projeto usando o seguinte comando:

 npm i heroicons@1.0.6 @tremor/react

Agora, vamos remover o código desnecessário em nosso src/App.js Arquivo. Aqui está o nosso código inicial em 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> 
  ); 
} 

Em seguida, crie um dedicado componentes subpasta em sua origem pasta. Naquilo componentes pasta, crie uma nova Dashboard.js arquivo e adicione o seguinte código:

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

Importe o componente Dashboard em App.js adicionando a seguinte instrução após outras importações:

 import Dashboard from "./components/Dashboard"; 

Por fim, exiba o componente em seu aplicativo React adicionando abaixo de h1 elemento.

Criando um painel com o Tremor

Para criar um painel completo usando Tremor, com o mínimo de confusão, selecione um dos blocos disponíveis. Os blocos são layouts pré-construídos compostos de diferentes pequenos componentes modulares.

meu tablet android não liga

Um bom ponto de partida é bloqueios de tremor seção que mostra diferentes tipos de componentes de blocos pré-construídos que você pode usar. Os shells de layout, por exemplo, permitem que você reúna diferentes componentes para criar um painel.

Primeiro, adicione o seguinte código ao seu Dashboard.js Arquivo:

 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; 
 

O bloco shell contém componentes diferentes que você importa na parte superior do arquivo. Se você visualizar isso em seu navegador, verá apenas dois blocos vazios.

Você pode preencher seus blocos com os componentes pré-construídos do Tremor, como um gráfico, cartão ou tabela. Você pode extrair dados de uma API (REST ou GraphQL) ou armazená-los em uma matriz de objetos dentro do seu componente.

Para adicionar um componente ao seu bloco shell, substitua o

 <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> 
))}