https://github.com/nparkison/react-feedback-widget
A modern, customizable React feedback widget component with TypeScript support, Tailwind CSS styling, and Supabase integration. Perfect for collecting user feedback with a clean, responsive UI.
https://github.com/nparkison/react-feedback-widget
feedback-widget frontend javascript react responsive storybook supabase tailwindcss typescript ui-components user-feedback vite
Last synced: 2 months ago
JSON representation
A modern, customizable React feedback widget component with TypeScript support, Tailwind CSS styling, and Supabase integration. Perfect for collecting user feedback with a clean, responsive UI.
- Host: GitHub
- URL: https://github.com/nparkison/react-feedback-widget
- Owner: nparkison
- License: mit
- Created: 2025-07-08T11:12:19.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-08T14:15:11.000Z (11 months ago)
- Last Synced: 2025-10-21T20:44:12.150Z (8 months ago)
- Topics: feedback-widget, frontend, javascript, react, responsive, storybook, supabase, tailwindcss, typescript, ui-components, user-feedback, vite
- Language: TypeScript
- Homepage:
- Size: 832 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Feedback Widget
[](https://opensource.org/licenses/MIT)
[](https://circleci.com/gh/nparkison/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.
```bash
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:
```bash
npm run storybook
```
### Building the Project
To create the distributable files for the library, run the build script:
```bash
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.
```tsx
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 ;
};
export default App;
```
## API Reference (Props)
| Prop | Type | Required | Default | Description |
| :------------- | :--------------------------------------------------------------- | :------- | :--------------- | :------------------------------------------------------------------------------------------------------ |
| `onSubmit` | `(data: { rating: number; comment: string }) => Promise;` | **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.
```tsx
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 ;
};
```
## Contributing
Contributions are welcome! Please read our [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get started.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.