takeissue

v0.1.4

Published

a month ago

React feedback and bug reporting components for your app

0High
0Medium
0Low

ggarnhart

react feedback bug-report issue-tracker screenshot annotation

Take Issue

React components for collecting feedback and bug reports from your users. Screenshots, annotations, and automatic GitHub issue creation.

Installation

npm install takeissue
# or
pnpm add takeissue
# or
yarn add takeissue

Requirements

React 18 or 19
Tailwind CSS (v3 or v4)

Quick Start

1. Get your API key

2. Add the provider

Wrap your app with TakeIssueProvider:

// app/layout.tsx (Next.js) or your root component
import { TakeIssueProvider } from 'takeissue'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <TakeIssueProvider
          apiKey={process.env.NEXT_PUBLIC_TAKE_ISSUE_API_KEY!}
          onSuccess={(issue) => {
            console.log('Issue submitted:', issue)
          }}
        >
          {children}
        </TakeIssueProvider>
      </body>
    </html>
  )
}

3. Trigger the feedback form

Use the useTakeIssue hook to open the feedback modal:

import { useTakeIssue } from 'takeissue'

function MyComponent() {
  const { openTakeIssue } = useTakeIssue()
  return <button onClick={openTakeIssue}>Report a Bug</button>
}

Components

TakeIssueProvider

The main provider component. Wrap your app with this.

<TakeIssueProvider
  apiKey="ti_live_..."           // Required: Your API key
  apiUrl="https://www.takeissue.dev" // Optional: Custom API URL
  enableCommandPalette={false}   // Optional: Enable Cmd+K palette (default: false)
  onSuccess={(issue) => {}}      // Optional: Success callback
  onError={(error) => {}}        // Optional: Error callback
>
  {children}
</TakeIssueProvider>

useTakeIssue Hook

Programmatically open the issue reporter:

import { useTakeIssue } from 'takeissue'

function MyComponent() {
  const { openTakeIssue } = useTakeIssue()

  return (
    <button onClick={openTakeIssue}>
      Report a Bug
    </button>
  )
}

TakeIssueForm

A standalone form component for embedding in your own UI:

import { TakeIssueForm } from 'takeissue'

function FeedbackPage() {
  return (
    <TakeIssueForm
      onSuccess={(issue) => console.log('Submitted:', issue)}
      onError={(error) => console.error('Error:', error)}
      className="max-w-md mx-auto"
    />
  )
}

Tailwind Configuration

Make sure Tailwind scans the package for classes:

Tailwind v4 (CSS config):

/* globals.css */
@import "tailwindcss";

@source "../node_modules/takeissue";

Tailwind v3 (JS config):

// tailwind.config.js
module.exports = {
  content: [
    // ... your content paths
    './node_modules/takeissue/**/*.{js,mjs}',
  ],
}

Excluding Elements from Screenshots

Add data-takeissue-exclude to any element you don't want captured in screenshots:

<div data-takeissue-exclude>
  This won't appear in screenshots
</div>

Features

Screenshot Capture: Automatically captures the current page
Annotation Tools: Draw, highlight, add arrows and text
GitHub Integration: Creates issues directly in your repository
Customizable: Use individual components or the full provider

License

MIT