React Visual Feedback

A powerful React component library for collecting visual feedback with screenshots, annotations, and a professional admin dashboard.

✨ Features

• 📸 Visual Feedback - Users can capture screenshots and annotate them
• 🎨 Customizable Themes - Match your brand with customizable colors and styling
• 📊 Admin Dashboard - Professional admin panel to manage and analyze feedback
• 🔍 Search & Filter - Advanced filtering by category, rating, and keywords
• 📱 Responsive Design - Works perfectly on desktop and mobile devices
• 🎯 TypeScript Support - Full TypeScript support with comprehensive typings
• 🌙 Dark Mode - Built-in dark theme support
• 💾 Flexible Storage - LocalStorage, SessionStorage, or custom storage solutions
• 🚀 Easy Integration - Simple setup with minimal configuration

📦 Installation

npm install react-visual-feedback
# or
yarn add react-visual-feedback
# or
pnpm add react-visual-feedback

🚀 Quick Start

Basic Usage

import React from 'react';
import { FeedbackTool } from 'react-visual-feedback';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <p>Your app content here...</p>
      
      <FeedbackTool />
    </div>
  );
}

export default App;

Advanced Configuration

import React from 'react';
import { FeedbackTool } from 'react-visual-feedback';

function App() {
  const handleFeedbackSubmit = (feedback) => {
    console.log('New feedback:', feedback);
    // Send to your backend
  };

  return (
    <FeedbackTool
      config={{
        branding: {
          companyName: 'My Company',
          primaryColor: '#6366f1',
        },
        theme: {
          colors: {
            primary: '#6366f1',
            primaryHover: '#4f46e5',
          },
        },
        features: {
          enableScreenshots: true,
          enableAdminPanel: true,
        },
      }}
      options={{
        position: 'bottom-right',
        buttonText: 'Send Feedback',
        showRating: true,
        categories: [
          { id: 'bug', label: 'Bug Report', color: '#ef4444' },
          { id: 'feature', label: 'Feature Request', color: '#3b82f6' },
        ],
      }}
      onFeedbackSubmit={handleFeedbackSubmit}
    />
  );
}

🎨 Configuration

Config Options

interface FeedbackConfig {
  theme?: Partial<FeedbackTheme>;
  branding?: {
    logo?: string;
    companyName?: string;
    primaryColor?: string;
  };
  features?: {
    enableScreenshots?: boolean;
    enableAnnotations?: boolean;
    enableAdminPanel?: boolean;
    enableExport?: boolean;
    enableFiltering?: boolean;
    enableSearch?: boolean;
  };
  storage?: {
    key?: string;
    type?: 'localStorage' | 'sessionStorage' | 'custom';
    customStorage?: StorageAdapter;
  };
  admin?: {
    password?: string;
    enableStats?: boolean;
    enableSearch?: boolean;
    enableFiltering?: boolean;
  };
}

Button Options

interface FeedbackOptions {
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  buttonStyle?: 'floating' | 'inline';
  buttonText?: string;
  buttonIcon?: boolean;
  autoOpen?: boolean;
  categories?: FeedbackCategory[];
  requiredFields?: ('name' | 'email' | 'message')[];
  showRating?: boolean;
  enableVisualMode?: boolean;
}

🎯 Examples

Custom Theme

import { FeedbackTool, darkTheme } from 'react-visual-feedback';

<FeedbackTool
  config={{
    theme: darkTheme,
    branding: {
      companyName: 'Dark Mode App',
      primaryColor: '#8b5cf6',
    },
  }}
/>

Inline Button

<FeedbackTool
  options={{
    buttonStyle: 'inline',
    position: 'bottom-right', // Ignored for inline style
    buttonText: 'Help Us Improve',
  }}
/>

Custom Categories

<FeedbackTool
  options={{
    categories: [
      { id: 'ui', label: 'UI Issue', color: '#ef4444' },
      { id: 'performance', label: 'Performance', color: '#f59e0b' },
      { id: 'feature', label: 'Feature Request', color: '#3b82f6' },
      { id: 'other', label: 'Other', color: '#6b7280' },
    ],
  }}
/>

📊 Admin Dashboard

The admin dashboard provides a professional interface to manage feedback:

• Statistics Overview - Total feedback, ratings, screenshots count
• Advanced Search - Search by name, email, or message content
• Smart Filtering - Filter by category, rating, or date range
• Export Functionality - Export feedback data as JSON
• Screenshot Viewer - View annotated screenshots in detail
• Responsive Design - Works on all device sizes

Access Admin Panel

1. Add the admin component to your app:

import { FeedbackAdmin } from 'react-visual-feedback';

function AdminPage() {
  return <FeedbackAdmin />;
}

2. Default password: admin123 (configure in settings)

🎨 Theming

Default Theme

const defaultTheme = {
  colors: {
    primary: '#3b82f6',
    primaryHover: '#2563eb',
    secondary: '#64748b',
    background: '#ffffff',
    surface: '#f8fafc',
    text: '#1e293b',
    textSecondary: '#64748b',
    border: '#e2e8f0',
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
  },
  borderRadius: '0.5rem',
  fontFamily: 'Inter, system-ui, sans-serif',
  fontSize: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
  },
};

Dark Theme

import { darkTheme } from 'react-visual-feedback';

<FeedbackTool config={{ theme: darkTheme }} />

📱 Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Your Name

Made with ❤️ for the React community