@nexdeck/feedback-modal

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

Instalação

``bash
npm install @nexdeck/feedback-modal
`

Uso

$3

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

function App() {
const [open, setOpen] = useState(false)
const userEmail = 'usuario@exemplo.com' // Email do usuário logado

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

)
}
`

$3

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

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

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

)
}
`

$3

`tsx
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),
})
}}
/>
`

$3

`tsx
// Fundo escuro (padrão antigo)
open={open}
onOpenChange={setOpen}
backdropClassName="bg-black/50"
email="usuario@exemplo.com"
apiUrl="https://api.exemplo.com/feedback"
/>

// Fundo transparente
open={open}
onOpenChange={setOpen}
backdropClassName="bg-transparent"
email="usuario@exemplo.com"
apiUrl="https://api.exemplo.com/feedback"
/>

// Fundo branco (padrão)
open={open}
onOpenChange={setOpen}
email="usuario@exemplo.com"
apiUrl="https://api.exemplo.com/feedback"
/>
`

Componentes

$3

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

$3

| 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 | 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.

$3

`tsx
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

`bash

Instalar dependências

npm install

Desenvolvimento

npm run dev

Build

npm run build

Type check

npm run type-check
``

Licença

MIT