@nexdeck/feedback-modal

Componente de modal de feedback para React, construído com React 19, TypeScript, Tailwind CSS v4 e Base UI.

Instalação

npm install @nexdeck/feedback-modal

Uso

Com Botão Flutuante (Recomendado)

import { FeedbackModal, FeedbackButton } from '@nexdeck/feedback-modal'
import '@nexdeck/feedback-modal/styles'

function App() {
  const [open, setOpen] = useState(false)
  const userEmail = '[email protected]' // Email do usuário logado

  return (
    <>
      <FeedbackButton onClick={() => setOpen(true)} />
      <FeedbackModal
        open={open}
        onOpenChange={setOpen}
        email={userEmail}
        apiUrl="https://api.exemplo.com/feedback"
      />
    </>
  )
}

Básico (sem botão flutuante)

import { FeedbackModal } from '@nexdeck/feedback-modal'
import '@nexdeck/feedback-modal/styles'

function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Abrir Feedback</button>
      <FeedbackModal
        open={open}
        onOpenChange={setOpen}
        apiUrl="https://api.exemplo.com/feedback"
      />
    </>
  )
}

Com callback customizado

<FeedbackModal
  open={open}
  onOpenChange={setOpen}
  onSubmit={async (data) => {
    // Sua lógica customizada aqui
    await fetch('/api/feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
  }}
/>

Customizando o fundo do modal (backdrop)

// Fundo escuro (padrão antigo)
<FeedbackModal
  open={open}
  onOpenChange={setOpen}
  backdropClassName="bg-black/50"
  email="[email protected]"
  apiUrl="https://api.exemplo.com/feedback"
/>

// Fundo transparente
<FeedbackModal
  open={open}
  onOpenChange={setOpen}
  backdropClassName="bg-transparent"
  email="[email protected]"
  apiUrl="https://api.exemplo.com/feedback"
/>

// Fundo branco (padrão)
<FeedbackModal
  open={open}
  onOpenChange={setOpen}
  email="[email protected]"
  apiUrl="https://api.exemplo.com/feedback"
/>

Componentes

FeedbackButton

Botão flutuante circular com ícone de balão de fala, posicionado no canto inferior direito da tela.

Props:

• Aceita todas as props padrão de button (HTMLButtonElement)
• className - Classes CSS adicionais

FeedbackModalProps

| Prop | Tipo | Descrição | Obrigatório | |------|------|-----------|-------------| | open | boolean | Controla se o modal está aberto | Sim | | onOpenChange | (open: boolean) => void | Callback quando o estado muda | Sim | | email | string | Email do usuário logado | Sim | | apiUrl | string | URL da API para enviar o feedback | Não* | | onSubmit | (data: FeedbackData) => Promise<void> \| void | Callback customizado para submit | Não* | | subjectOptions | Array<{value: string, label: string}> | Opções do select de assunto | Não | | className | string | Classes CSS adicionais para o modal | Não | | backdropClassName | string | Classes CSS para o fundo do modal (backdrop). Por padrão é branco (bg-white). Use bg-black/50 para escuro ou bg-transparent para transparente | Não |

* É necessário fornecer apiUrl ou onSubmit

Nota: A URL atual da página é capturada automaticamente e enviada junto com o feedback.

FeedbackData

interface FeedbackData {
  email: string
  url: string
  subject: string
  message: string
}

Opções padrão de Subject:

• bug - Bug
• erro - Erro
• feature - Feature

Você pode customizar as opções passando subjectOptions como prop.

Requisitos

• React 19+
• React DOM 19+

Desenvolvimento

# Instalar dependências
npm install

# Desenvolvimento
npm run dev

# Build
npm run build

# Type check
npm run type-check

Licença

MIT