@snagtag/react

React components and hooks for SnagTag - the drop-in testing and QA plugin.

Install

npm install @snagtag/react @snagtag/core @snagtag/adapter-local

Peer dependencies: react >= 18, react-dom >= 18. Optional: tailwindcss >= 3 (or import compiled CSS).

Quick start

import { SnagTag } from '@snagtag/react'
import { createLocalAdapter } from '@snagtag/adapter-local'

const adapter = createLocalAdapter()

function App() {
  return (
    <>
      <YourApp />
      <SnagTag adapter={adapter} />
    </>
  )
}

That's it. Renders a FAB button, test report modal, and element inspector overlay.

CSS

If your app uses Tailwind, SnagTag's classes work automatically.

If not, import the compiled CSS:

import '@snagtag/react/styles'

Full dashboard

import { SnagTagPage } from '@snagtag/react'

<SnagTagPage adapter={adapter} />

Renders a tabbed page with Reports, Sessions, Groups, and Guide tabs.

Components

| Component | Purpose | |-----------|---------| | <SnagTag> | Drop-in wrapper (FAB + modal + inspector + highlights) | | <SnagTagPage> | Full testing dashboard with tabs | | <TestingFAB> | Floating action button | | <TestReportModal> | Report submission form | | <InspectorOverlay> | Element hover/capture overlay | | <ElementHighlightOverlay> | Green numbered highlights | | <TestReportsTable> | Reports data table with filters | | <TestReportDetailDrawer> | Report detail slide-in panel | | <TestReportExportModal> | Export to markdown/clipboard | | <TestReportGroupsTab> | Report groups management | | <TestingSessionsTab> | Testing sessions management | | <TestingGuideTab> | User guide | | <FindSimilarPopover> | Duplicate report finder |

Hooks

// Reports
useTestReports(opts?)        // List reports with filters
useCreateTestReport()        // Submit a new report
useUpdateTestReport()        // Update report fields
useMarkFixed()               // Mark reports as fixed
useDeleteTestReport()        // Remove reports
useReopenTestReport()        // Reopen resolved reports

// Groups & Sessions
useTestReportGroups()        // List groups
useActiveTestingSession()    // Get current session
useCreateTestingSession()    // Start a session

// Mode
useTestingMode()             // Toggle testing mode on/off

All hooks use the adapter provided via <SnagTagProvider> - no direct database calls.

License

MIT