Support Feedback Widget

A React library for collecting user feedback with screenshot capabilities, context support, and interactive region cropping.

Features

• Context-Aware: Support for multiple questions/items on a single page.
• Screenshot Capture: Automatic viewport capture with cropping/highlighting.
• Image Protection: Prevents right-click/download on sensitive screenshots.
• Responsive: Mobile-friendly "bottom sheet" style on small screens.
• Customizable: Theme colors, context data, and error types.

Installation

Via NPM/Yarn

npm install hocmai-feedback-widget
# or
yarn add hocmai-feedback-widget

Local Installation

1. Build and pack the project:

   npm run build
   npm pack

2. Install the generated .tgz file in your target project:

   npm install ./path/to/hocmai-feedback-widget-0.1.0.tgz

Usage

1. Wrap your application

Wrap your root component (or the section of the app that needs feedback) with FeedbackProvider.

import { FeedbackProvider, type FeedbackData } from 'hocmai-feedback-widget';
// If styles are not automatically injected by your bundler, you might need:
// import '@antigravity/feedback-widget/dist/style.css';

function App() {
  const handleSubmit = async (data: FeedbackData) => {
    // Send data to your API
    console.log('Feedback submitted:', data);
    // data.screenshots contains base64 images
    // data.deviceInfo contains browser/OS info
    // data.errorType contains the selected category
  };

  return (
    <FeedbackProvider onSubmit={handleSubmit} themeColor="#3b82f6">
      <YourAppContent />
    </FeedbackProvider>
  );
}

2. Trigger Feedback Form

Use the useFeedback hook anywhere in your child components to open the widget for a specific item.

import { useFeedback } from 'hocmai-feedback-widget';

const QuestionItem = ({ id, content }) => {
  const { openFeedback } = useFeedback();

  return (
    <div className="card">
      <p>{content}</p>
      <button 
        onClick={() => openFeedback(id, { source: 'QuestionItem', extra: 'details' })}
      >
        Report Error
      </button>
    </div>
  );
};

3. Standalone Component (Legacy)

If you only need a single widget instance and manage state manually:

import { FeedbackWidget } from 'hocmai-feedback-widget';

<FeedbackWidget 
  questionId="123"
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onSubmit={handleSubmit}
/>

Props & Configuration

FeedbackProvider

| Prop | Type | Required | Description | |------|------|----------|-------------| | onSubmit | (data: FeedbackData) => Promise<void> | Yes | Callback when feedback is sent. | | themeColor | string | No | Primary color for buttons/highlights. Default: #3b82f6. | | children | ReactNode | Yes | Your application content. |

useFeedback Hook

Returns an object with:

• openFeedback(questionId: string | number, questionIdChild?: string | number, contextData?: any): Opens the form with the specified ID.

Close Feedback Hook

Returns an object with:

• closeFeedback(): Closes the form.

4. Using with JavaScript (No TypeScript)

This library is fully compatible with standard JavaScript projects. The usage is identical, just without type annotations.

import { FeedbackProvider, useFeedback } from 'hocmai-feedback-widget';

function App() {
  const handleSubmit = async (data) => {
    console.log('Feedback submitted:', data);
  };

  return (
    <FeedbackProvider onSubmit={handleSubmit}>
      <YourAppContent />
    </FeedbackProvider>
  );
}

Note: You won't get autocomplete for props, but the functionality remains the same.

Note: You need to refer to and combine the documentation link below to prepare the question report. url: https://gist.github.com/haiduy/fe2b016af8f0c9d268d791b130dc64d2