@tecaless/appkit-react

Integração React e Next.js do AppKit — checklists de primeiros passos, telas vazias e avisos dentro do seu SaaS.

Instalação

npm i @tecaless/appkit-react

import { AppKitProvider } from '@tecaless/appkit-react';

export default function App({ children }) {
  return (
    <AppKitProvider apiKey="pk_live_sua_chave" userId={usuario.id}>
      {children}
    </AppKitProvider>
  );
}

Disparar eventos

import { useAppKit } from '@tecaless/appkit-react';

const { track, complete } = useAppKit();
track('fatura_emitida');

O hook funciona mesmo fora do Provider — as chamadas entram na fila do SDK. Nunca lança exceção: onboarding não pode derrubar a tela do seu cliente.

Telas vazias

import { AppKitAnchor } from '@tecaless/appkit-react';

<AppKitAnchor id="faturas-vazio">
  <p>Nenhuma fatura encontrada.</p>
</AppKitAnchor>

Enquanto não houver conteúdo publicado para esse ponto, o que está em children continua aparecendo normalmente.

Por que não existe componente de checklist

O checklist e os avisos são renderizados pelo runtime em Shadow DOM, fora da árvore do React — é o que garante isolamento de CSS e falha aberta. O que este pacote expõe é o AppKitAnchor, que declara onde ficam as telas vazias.

Um produto da Tecaless Technologies LTDA.