A fully customizable React feedback widget component with floating icon and modal form
npm install react-collect-feedback-widgetbash
npm install react-collect-feedback-widget
`
Quick Start
`tsx
import { FeedbackWidget } from 'react-collect-feedback-widget';
import 'react-collect-feedback-widget/styles';
function App() {
return (
console.log('Feedback received:', data);
// Handle feedback submission
}}
/>
);
}
`
Basic Usage
$3
`tsx
import { FeedbackWidget } from 'react-collect-feedback-widget';
function App() {
const handleFeedback = async (data) => {
// Send to your backend
await fetch('/api/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
};
return
}
`
$3
`tsx
import { FeedbackWidget } from 'react-collect-feedback-widget';
function App() {
return
}
`
Customization
$3
Control which fields are displayed:
`tsx
rating: true,
text: true,
email: true,
name: true,
category: true,
}}
onSubmit={handleFeedback}
/>
`
$3
`tsx
onSubmit={handleFeedback}
/>
`
$3
`tsx
primary: '#6366f1',
secondary: '#8b5cf6',
background: '#ffffff',
text: '#1f2937',
success: '#10b981',
error: '#ef4444',
}}
onSubmit={handleFeedback}
/>
`
$3
`tsx
title: 'We value your feedback',
rating: 'How would you rate us?',
text: 'Tell us what you think',
submit: 'Send Feedback',
success: 'Thanks! We received your feedback.',
}}
onSubmit={handleFeedback}
/>
`
$3
`tsx
categories={[
{ value: 'bug', label: 'Bug Report' },
{ value: 'feature', label: 'Feature Request' },
{ value: 'improvement', label: 'Improvement' },
{ value: 'other', label: 'Other' },
]}
onSubmit={handleFeedback}
/>
`
$3
`tsx
}
onSubmit={handleFeedback}
/>
`
$3
`tsx
icon: 'hover:scale-125',
modal: 'rounded-xl',
form: 'p-8',
button: {
submit: 'px-6 py-3',
cancel: 'px-6 py-3',
},
}}
onSubmit={handleFeedback}
/>
`
$3
`tsx
onSubmit={handleFeedback}
/>
`
$3
`tsx
onSubmit={handleFeedback}
/>
`
Complete Example
`tsx
import { FeedbackWidget } from 'react-collect-feedback-widget';
import 'react-collect-feedback-widget/styles';
function App() {
const handleFeedback = async (data) => {
try {
const response = await fetch('/api/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!response.ok) throw new Error('Failed to submit');
console.log('Feedback submitted:', data);
} catch (error) {
console.error('Error submitting feedback:', error);
}
};
return (
fields={{
rating: true,
text: true,
email: true,
name: false,
category: true,
}}
position="bottom-right"
theme={{
primary: '#3b82f6',
success: '#10b981',
}}
labels={{
title: 'Share Your Thoughts',
rating: 'Rate your experience',
text: 'What can we improve?',
}}
categories={[
{ value: 'bug', label: 'Bug' },
{ value: 'feature', label: 'Feature Request' },
{ value: 'feedback', label: 'General Feedback' },
]}
zIndex={1000}
/>
);
}
`
API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| onSubmit | (data: FeedbackData) => void \| Promise | - | Callback function called when feedback is submitted |
| apiEndpoint | string | - | API endpoint URL for direct submission |
| fields | FeedbackFieldsConfig | { rating: true, text: true } | Configuration for which fields to show |
| position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'bottom-right' | Position of the feedback icon |
| theme | FeedbackTheme | - | Custom theme colors |
| customStyles | object | - | Custom CSS classes for styling |
| icon | ReactNode | - | Custom icon component |
| labels | FeedbackLabels | - | Customizable text labels |
| categories | FeedbackCategory[] | - | Categories for feedback type selection |
| show | boolean | true | Show/hide the widget |
| zIndex | number | 50 | Custom z-index for the widget |
$3
`typescript
interface FeedbackData {
rating?: number; // 1-5 star rating
text?: string; // Text feedback
email?: string; // User email (optional)
name?: string; // User name (optional)
category?: string; // Feedback category
}
`
$3
`typescript
interface FeedbackFieldsConfig {
rating?: boolean;
text?: boolean;
email?: boolean;
name?: boolean;
category?: boolean;
}
`
$3
`typescript
interface FeedbackTheme {
primary?: string; // Primary color (buttons, icons)
secondary?: string; // Secondary color
background?: string; // Background color
text?: string; // Text color
success?: string; // Success message color
error?: string; // Error message color
}
`
$3
`typescript
interface FeedbackLabels {
title?: string;
rating?: string;
text?: string;
email?: string;
name?: string;
category?: string;
submit?: string;
cancel?: string;
placeholder?: {
text?: string;
email?: string;
name?: string;
category?: string;
};
success?: string;
error?: string;
}
`
Styling
The component uses Tailwind CSS for styling. Make sure to import the styles:
`tsx
import 'react-collect-feedback-widget/styles.css';
`
If you're using Tailwind in your project, you may need to configure it to include the widget's styles. The component uses utility classes that should work out of the box.
TypeScript
Full TypeScript support is included. Import types as needed:
`tsx
import { FeedbackWidget, FeedbackData, FeedbackWidgetProps } from 'react-collect-feedback-widget';
`
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Development
$3
- Node.js 16+ and npm 8+
$3
`bash
Clone the repository
git clone https://github.com/farukomer58/react-collect-feedback-widget.git
cd react-collect-feedback-widget
Install dependencies
npm install
Build the package
npm run build
Run type checking
npm run type-check
Watch mode for development
npm run dev
`
$3
`
src/
components/ # React components
hooks/ # Custom React hooks
utils/ # Utility functions
types.ts # TypeScript definitions
styles/ # CSS styles
index.ts # Main entry point
`
Troubleshooting
$3
Make sure you've imported the CSS file:
`tsx
import 'react-collect-feedback-widget/styles.css';
`
$3
- Check that the show prop is not set to false
- Verify that there are no z-index conflicts with other elements
- Ensure React and React-DOM are installed as peer dependencies
$3
The widget includes built-in validation:
- Rating must be between 1-5 if the rating field is enabled
- Text feedback must be at least 3 characters if the text field is enabled
- Email must be valid format if provided
- Category must be selected if the category field is enabled
$3
Ensure you're using TypeScript 4.5+ and have @types/react and @types/react-dom installed.
FAQ
Q: Can I use this without Tailwind CSS?
A: The component uses Tailwind CSS classes, but the compiled CSS is included in the package. You don't need Tailwind in your project.
Q: How do I customize the appearance?
A: Use the theme prop for colors and customStyles prop for additional CSS classes.
Q: Can I submit feedback to multiple endpoints?
A: Use the onSubmit callback to handle multiple submissions or custom logic.
Q: Is the widget accessible?
A: Yes! The widget includes ARIA labels, keyboard navigation, and focus management for screen readers.
Contributing
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)