flair-react-widget

Widget oficial de venda de ingressos da Flair para React e Next.js.

Instalação

npm install flair-react-widget
# ou
yarn add flair-react-widget
# ou
pnpm add flair-react-widget

Uso Básico

import { TicketWidget } from 'flair-react-widget';

function App() {
  return (
    <TicketWidget
      eventId="seu-event-id"
      apiUrl="https://api.flair.api.br/api/v1"
    />
  );
}

Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | eventId | string | obrigatório | ID do evento | | apiUrl | string | https://api.flair.api.br/api/v1 | URL da API | | theme | WidgetTheme | {} | Customização visual | | collectCustomerData | boolean | true | Coletar dados do cliente | | requiredFields | string[] | ['name', 'email', 'phone', 'tax_id'] | Campos obrigatórios | | onPurchase | (data: any) => void | undefined | Callback customizado de compra | | onError | (error: Error) => void | undefined | Callback de erro |

Customização de Tema

<TicketWidget
  eventId="seu-event-id"
  apiUrl="https://api.flair.api.br/api/v1"
  theme={{
    primaryColor: '#FF7A00',
    secondaryColor: '#FF9F40',
    textColor: '#18181B',
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    buttonStyle: 'filled' // 'filled' | 'outline' | 'minimal'
  }}
/>

Exemplo Completo

import { TicketWidget } from 'flair-react-widget';

function EventPage() {
  const handlePurchase = async (data: any) => {
    console.log('Compra iniciada:', data);
    // Lógica customizada de compra
  };

  const handleError = (error: Error) => {
    console.error('Erro:', error);
    // Tratamento de erro customizado
  };

  return (
    <div>
      <h1>Compre seus ingressos</h1>
      <TicketWidget
        eventId="550e8400-e29b-41d4-a716-446655440000"
        apiUrl="https://api.flair.api.br/api/v1"
        theme={{
          primaryColor: '#FF7A00',
          buttonStyle: 'filled'
        }}
        requiredFields={['name', 'email', 'phone']}
        onPurchase={handlePurchase}
        onError={handleError}
      />
    </div>
  );
}

Next.js

O widget funciona perfeitamente com Next.js (App Router e Pages Router):

'use client'; // Apenas necessário no App Router

import { TicketWidget } from 'flair-react-widget';

export default function EventPage() {
  return (
    <TicketWidget
      eventId="seu-event-id"
      apiUrl="https://api.flair.api.br/api/v1"
    />
  );
}

TypeScript

O pacote inclui definições de tipos completas:

import type { TicketWidgetProps, WidgetTheme } from 'flair-react-widget';

const theme: WidgetTheme = {
  primaryColor: '#FF7A00',
  buttonStyle: 'filled'
};

const props: TicketWidgetProps = {
  eventId: 'seu-event-id',
  apiUrl: 'https://api.flair.api.br/api/v1',
  theme
};

Licença

MIT © Flair

Links

• NPM: https://www.npmjs.com/package/flair-react-widget
• Website: https://flair.api.br