react-collect-feedback
v1.0.4
Published
A React plugin to collect feedback easily from webpages. The react-collect-feedback plugin has props through which feedback collection can be customized extensively.
Downloads
4
Maintainers
Readme
React Collect Feedback Widget
React-Collect-Feedback is a highly customizable feedback widget component built with React. It allows easy collection of user feedback through ratings, emojis, or text inputs. The widget can be integrated into any React application, providing seamless feedback collection that can be adapted to fit your needs.
Features
- Multiple templates for collecting feedback (rating, product review, score).
- Emoji-based feedback.
- Customizable rating system (e.g., 5 stars).
- Text-based feedback collection.
- User information collection (name, email, contact).
- Easy configuration of feedback options and display.
- Customizable widget position and auto-close functionality.
Installation
- You can install the widget from npm by running:
npm install react-collect-feedback
- Usage To start using the react-collect-feedback widget in your project, import it and use it within your components.
import React from 'react';
import FeedbackWidget from 'react-collect-feedback';
function App() {
const handleFeedbackSubmit = (data) => {
console.log("Feedback submitted:", data);
};
const feedbackWidgetProps = {
template: "rating",
promptText: "How did we do?",
showThumb: false,
position: "bottom-right",
onSubmitFeedback: handleFeedbackSubmit,
feedbackTitle: "Tell us what you think",
closeAfter: 5000,
options: [
{ title: "What kind of feedback do you have?" },
{ icon: "👍", text: "I like something" },
{ icon: "👎", text: "I don't like something" },
{ icon: "💡", text: "I have an idea" }
],
captureUserInfo: { name: true, email: true, contact: true },
ratings: [
{ value: "Speed of website", mandatory: true },
{ value: "Content quality", mandatory: true },
{ value: "Ease of navigation", mandatory: false }
],
score: [
{ title: "How satisfied are you?", number: 5 },
{ title: "How likely are you to recommend us?", number: 10 }
]
};
return (
<div>
<FeedbackWidget {...feedbackWidgetProps} />
</div>
);
}
export default App;
Props Configuration
template
: Choose a template for feedback collection. Options includeproduct
: For collecting product-related feedback.
page
: General page feedback.
rating
: Star ratings for specific feedback categories.
score
: Score-based feedback, e.g., 1 to 5 or 1 to 10.
promptText
: Text prompt for initiating the feedback collection (default is "How did we do?").showThumb
: Show thumbs up/down for quick reactions. Default is false.position
: Position of the feedback widget on the screen. Available positions:bottom-right
bottom-left
top-right
top-left
onSubmitFeedback
: Callback function that will receive the collected feedback data when the user submits it.feedbackTitle
: Title text that appears at the top of the feedback popup (e.g., "Tell us what you think").closeAfter
: Time in milliseconds after which the widget will close automatically after submission. Default is 5000.options
: Array of objects defining feedback options (icons, text) for quick user feedback.captureUserInfo
: Boolean values for capturing user information (name, email, contact).ratings
: Array of objects for rating different aspects (value, mandatory status). Example:
Contributing
If you want to contribute to this project, feel free to submit pull requests or open issues for suggestions and bug reports.
License
This project is licensed under the MIT License. See the LICENSE file for details.