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.
- Auto-Upload: Screenshots are automatically uploaded to S3 and returned as URLs.
- 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

$3

``bash
npm install hocmai-feedback-widget

or

yarn add hocmai-feedback-widget
`

$3

1. Build and pack the project:
`bash
npm run build
npm pack
`
2. Install the generated .tgz file in your target project:
`bash
npm install ./path/to/hocmai-feedback-widget-0.1.0.tgz
`

Usage

$3

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

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

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

return (



);
}
`

$3


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

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

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

return (



);
};
`

$3

If you need a single widget instance and manage state manually (legacy mode):

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

questionId="123"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSubmit={handleSubmit}
isEnableCaptureFull={true}
isEnableCaptureElement={true}
/>
`

Props & Configuration

$3


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

$3

`ts
interface FeedbackData {
idQuestion: string | number;
idChildQuestion?: string | number;
errorDescription: string;
errorType: string;
listImage: string[]; // Array of image URLs
deviceInfo: {
device: string;
os: string;
browser: string;
screen: string;
userAgent: string;
};
contextData?: any;
}
`

$3

Returns an object with:
- openFeedback(questionId: string | number, contextData?: any): Opens the form. contextData can include questionIdChild which will pre-fill the child question ID field.
- closeFeedback(): Closes the form.

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| questionId | string \| number | Required | Main ID of the item being reported. |
| onSubmit | function | Required | Async callback receiving FeedbackData. |
| contextData | object | - | Additional data passed to FeedbackData. |
| themeColor | string | #3b82f6 | Theme color. |
| isOpen | boolean | - | Control visibility manually. |
| onClose | function | - | Callback when closed. |
| isEnableCaptureFull | boolean | true | Enable full screen capture button. |
| isEnableCaptureElement | boolean | true` | Enable crop/element capture button. |

License

MIT