react-light-feedback

A lightweight, dead-simple React library for capturing in-app user feedback with automatic metadata collection and optional screenshots.

Features

• Simple integration - Drop in a single component
• Multiple backends - Supabase, Firebase, or any webhook
• Automatic metadata - URL, viewport, browser info, timestamps
• Optional screenshots - Powered by html2canvas
• Customizable UI - CSS variables for theming
• TypeScript - Full type definitions included
• Lightweight - Tree-shakeable, minimal dependencies

Installation

npm install react-light-feedback

Peer Dependencies

For screenshots (optional):

npm install html2canvas

For Supabase provider:

npm install @supabase/supabase-js

For Firebase provider:

npm install firebase

Quick Start

With Supabase

import { FeedbackWidget } from 'react-light-feedback';

function App() {
  return (
    <FeedbackWidget
      provider="supabase"
      supabaseUrl="https://xxx.supabase.co"
      supabaseKey="your-anon-key"
    />
  );
}

With Firebase

import { FeedbackWidget } from 'react-light-feedback';

function App() {
  return (
    <FeedbackWidget
      provider="firebase"
      firebaseConfig={{
        apiKey: "your-api-key",
        projectId: "your-project-id",
        // ... other config
      }}
      collectionName="feedback" // optional, defaults to "feedback"
    />
  );
}

With Webhook

import { FeedbackWidget } from 'react-light-feedback';

function App() {
  return (
    <FeedbackWidget
      provider="webhook"
      webhookUrl="https://your-api.com/feedback"
      webhookHeaders={{ "Authorization": "Bearer token" }} // optional
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | provider | 'supabase' \| 'firebase' \| 'webhook' | Required | Backend provider | | theme | 'light' \| 'dark' \| 'auto' | 'light' | Widget theme (auto follows system) | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Floating button position | | screenshotEnabled | boolean | true | Show screenshot toggle | | triggerText | string | 'Feedback' | Button text | | modalTitle | string | 'Send feedback' | Modal title | | placeholder | string | "What's on your mind?" | Textarea placeholder | | user | { id?, email?, name? } | - | User context to include | | onSuccess | () => void | - | Called on successful submission | | onError | (error: Error) => void | - | Called on submission error | | customTrigger | React.ReactNode | - | Replace floating button | | disabled | boolean | false | Disable the widget |

Supabase-specific props

| Prop | Type | Default | Description | |------|------|---------|-------------| | supabaseUrl | string | Required | Supabase project URL | | supabaseKey | string | Required | Supabase anon key | | tableName | string | 'feedback' | Table to insert into |

Firebase-specific props

| Prop | Type | Default | Description | |------|------|---------|-------------| | firebaseConfig | object | Required | Firebase config object | | collectionName | string | 'feedback' | Firestore collection |

Webhook-specific props

| Prop | Type | Default | Description | |------|------|---------|-------------| | webhookUrl | string | Required | URL to POST feedback to | | webhookHeaders | Record<string, string> | - | Custom headers |

Customization

CSS Variables

Override these CSS variables to customize the appearance:

:root {
  --feedback-primary-color: #0066cc;
  --feedback-primary-hover: #0052a3;
  --feedback-bg-color: #ffffff;
  --feedback-text-color: #1a1a1a;
  --feedback-text-secondary: #666666;
  --feedback-border-color: #e0e0e0;
  --feedback-border-radius: 8px;
  --feedback-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --feedback-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --feedback-overlay-bg: rgba(0, 0, 0, 0.5);
}

Custom Trigger

Replace the floating button with your own trigger:

<FeedbackWidget
  provider="supabase"
  supabaseUrl="..."
  supabaseKey="..."
  customTrigger={<button className="my-button">Give Feedback</button>}
/>

Programmatic Usage

Use the useFeedback hook for programmatic control:

import { FeedbackWidget, useFeedback } from 'react-light-feedback';

function MyComponent() {
  const { openModal, submitFeedback, isOpen, isSubmitting } = useFeedback();

  return (
    <button onClick={openModal}>
      Open Feedback Form
    </button>
  );
}

// Wrap your app with FeedbackWidget
function App() {
  return (
    <FeedbackWidget provider="supabase" supabaseUrl="..." supabaseKey="...">
      <MyComponent />
    </FeedbackWidget>
  );
}

Feedback Payload

The payload sent to your backend:

interface FeedbackPayload {
  message: string;
  metadata: {
    pageUrl: string;
    pagePath: string;
    viewport: { width: number; height: number };
    screen: { width: number; height: number };
    userAgent: string;
    timezone: string;
    language: string;
    referrer: string;
    timestamp: string;
  };
  user?: {
    id?: string;
    email?: string;
    name?: string;
  };
  screenshot?: string; // base64 data URL
}

Backend Setup

Supabase Table Schema

create table feedback (
  id uuid default gen_random_uuid() primary key,
  message text not null,
  metadata jsonb not null,
  user_context jsonb,
  screenshot text,
  created_at timestamp with time zone default now()
);

-- Enable RLS
alter table feedback enable row level security;

-- Allow inserts from anon users
create policy "Allow anonymous inserts"
  on feedback for insert
  with check (true);

Firebase Firestore Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /feedback/{document} {
      allow create: if true;
      allow read, update, delete: if false;
    }
  }
}

Webhook Payload

The webhook receives a POST request with Content-Type: application/json and the FeedbackPayload as the body.

License

MIT