@diegotsi/flint-react

Embeddable React widget that lets users report bugs directly from your app. Sends reports to a running flint-server instance.

Installation

bun add @diegotsi/flint-react
# or
npm install @diegotsi/flint-react

React 17+ is required as a peer dependency.

Usage

import { FlintWidget } from "@diegotsi/flint-react"

export default function App() {
  return (
    <>
      {/* your app */}
      <FlintWidget
        projectKey="your-project-api-key"
        serverUrl="https://your-flint-server.com"
      />
    </>
  )
}

The widget renders a floating button fixed to the bottom-right corner. Clicking it opens a modal where the user fills in a bug report.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | projectKey | string | required | API key from flint-server | | serverUrl | string | required | Base URL of your flint-server | | user | FlintUser | — | Pre-fill reporter info | | meta | Record<string, unknown> | — | Extra metadata attached to every report | | buttonLabel | string | "Reportar bug" | Label on the trigger button | | locale | "pt-BR" \| "en-US" | "pt-BR" | UI language | | theme | "light" \| "dark" \| ThemeOverride | "light" | Visual theme | | zIndex | number | 9999 | CSS z-index of the widget |

Theme customization

Pass a ThemeOverride object to fine-tune colors:

<FlintWidget
  projectKey="..."
  serverUrl="..."
  theme={{
    background: "#0f0f0f",
    accent: "#6366f1",
    text: "#f5f5f5",
    border: "#2a2a2a",
  }}
/>

Severity levels

| Level | Meaning | |-------|---------| | P1 | Critical — system down | | P2 | High — core feature broken | | P3 | Medium — noticeable but workable | | P4 | Low — cosmetic or improvement |

Development

# Watch mode
bun run dev

# Type-check
bun run typecheck

# Build
bun run build