Componentes HeadlessVisão Geral

Componentes Headless

Componentes React sem estilo e acessíveis com controle total da UI.

Instalação

yarn add @meaple/react-headless-components

Conceito

Componentes headless fornecem lógica e gerenciamento de estado sem prescrever UI. Você tem controle total sobre estilo e marcação.

Componentes Disponíveis

  • ListEvents - Exibir lista de eventos
  • ListEventTickets - Exibir ingressos do evento
  • ListEventProducts - Exibir produtos do evento
  • ListUserEvents - Exibir eventos do usuário
  • ListUserEventTickets - Exibir ingressos do usuário
  • ListCategories - Exibir categorias
  • Cart - Funcionalidade de carrinho de compras
  • Coupon - Validação de cupom
  • TicketQuantityController - Controle de quantidade de ingressos

Padrão de Uso

Todos os componentes usam o padrão render props:

import { ListEvents } from '@meaple/react-headless-components'
 
function MyEvents() {
  return (
    <ListEvents>
      {({ events, isLoading, error }) => (
        <div>
          {isLoading && <Spinner />}
          {error && <Error message={error.message} />}
          {events?.map(event => (
            <EventCard key={event.id} event={event} />
          ))}
        </div>
      )}
    </ListEvents>
  )
}

Contexto do Carrinho

Use CartProvider para funcionalidade de carrinho:

import { CartProvider, Cart } from '@meaple/react-headless-components'
 
function App() {
  return (
    <CartProvider>
      <Cart>
        {({ items, total, addItem, removeItem }) => (
          <div>
            <div>Total: R$ {total}</div>
            {items.map(item => (
              <div key={item.id}>
                {item.name} - R$ {item.price}
                <button onClick={() => removeItem(item.id)}>Remover</button>
              </div>
            ))}
          </div>
        )}
      </Cart>
    </CartProvider>
  )
}

Benefícios

  • Controle Total: Estilize com qualquer framework CSS ou solução
  • Acessibilidade: Atributos ARIA integrados e navegação por teclado
  • Flexibilidade: Personalize marcação e comportamento
  • Segurança de Tipos: Suporte completo ao TypeScript
  • Agnóstico ao Framework: Lógica separada da UI
UsuáriosCarrinho