React Feedback Widget

A lightweight, backend-agnostic, and customizable feedback widget for React applications.

---

Features

• Backend Agnostic: Connect to any backend by providing a simple onSubmit function.
• Easy to Integrate: Drop the component into any React or Next.js application.
• Customizable: Use props to control behavior and match your app's look and feel.
• Supabase Example: Includes a reference implementation for a Supabase backend (Edge Function + Database Migration).
• Built with Tailwind CSS: Easily customizable with standard Tailwind classes.

Development

To get started with development, clone the repository and install the dependencies.

git clone https://github.com/nparkison/react-feedback-widget.git
cd react-feedback-widget
npm install --legacy-peer-deps

Running Storybook

To view and develop the components in isolation, run Storybook:

npm run storybook

Building the Project

To create the distributable files for the library, run the build script:

npm run build

Usage Example

Note: This package is not yet published to npm. The following is an example of how to use the component once it is installed locally. You can see it in action by running Storybook.

Import the component and provide an onSubmit handler.

import { FeedbackWidget } from 'react-feedback-widget';
import 'react-feedback-widget/dist/style.css'; // Import styles after building the project

const App = () => {
  const handleFeedbackSubmit = async (data: { rating: number; comment: string }) => {
    // Your API call logic here
    console.log('Feedback submitted:', data);
    alert('Thank you for your feedback!');
  };

  return <FeedbackWidget onSubmit={handleFeedbackSubmit} />;
};

export default App;

API Reference (Props)

Prop	Type	Required	Default	Description
onSubmit	(data: { rating: number; comment: string }) => Promise<void>;	Yes	undefined	A function that is called when the user submits their feedback. It receives the data as an argument.
user	{ email?: string; }	No	{}	Optional user information to associate with the feedback.
open	boolean	No	undefined	Controls the open/closed state of the widget. If provided, you must also provide onOpenChange.
onOpenChange	(isOpen: boolean) => void	No	undefined	A callback function that is called when the widget's open state changes.
position	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	No	'bottom-right'	The position of the trigger button on the screen.
texts	{ title?: string; description?: string; submitText?: string; }	No	{...}	An object to override the default text content for internationalization or customization.

Backend Integration Guide

Using with Supabase

This project includes a reference implementation for a Supabase backend. You can find the necessary files in the examples/supabase/ directory.

1. Deploy the Edge Function: Deploy the handle-feedback function from examples/supabase/functions/handle-feedback/ to your Supabase project.

2. Run the Database Migration: Execute the SQL script from examples/supabase/migrations/ in your Supabase SQL editor to create the feedback table.

3. Implement the onSubmit Handler: In your application, create a Supabase client and use it in the onSubmit prop to call your Edge Function.

   import { FeedbackWidget } from 'react-feedback-widget';
   import 'react-feedback-widget/dist/style.css';
   import { createClient } from '@supabase/supabase-js';
   
   // Initialize your Supabase client
   const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');
   
   const App = () => {
     const handleFeedbackSubmit = async (data) => {
       const { error } = await supabase.functions.invoke('handle-feedback', {
         body: data, // The 'data' object contains { rating, comment }
       });
   
       if (error) {
         console.error('Failed to submit feedback:', error);
         alert('Sorry, something went wrong.');
       } else {
         alert('Feedback submitted successfully!');
       }
     };
   
     return <FeedbackWidget onSubmit={handleFeedbackSubmit} />;
   };

Contributing

Contributions are welcome! Please read our CONTRIBUTING.md for guidelines on how to get started.

License

This project is licensed under the MIT License. See the LICENSE file for details.