{"id":32544022,"url":"https://github.com/nparkison/react-feedback-widget","last_synced_at":"2026-04-13T04:32:04.792Z","repository":{"id":320074756,"uuid":"1016015908","full_name":"nparkison/react-feedback-widget","owner":"nparkison","description":"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.","archived":false,"fork":false,"pushed_at":"2025-07-08T14:15:11.000Z","size":852,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-21T20:44:12.150Z","etag":null,"topics":["feedback-widget","frontend","javascript","react","responsive","storybook","supabase","tailwindcss","typescript","ui-components","user-feedback","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nparkison.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-08T11:12:19.000Z","updated_at":"2025-07-08T14:15:16.000Z","dependencies_parsed_at":"2025-10-21T20:44:14.988Z","dependency_job_id":null,"html_url":"https://github.com/nparkison/react-feedback-widget","commit_stats":null,"previous_names":["nparkison/react-feedback-widget"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/nparkison/react-feedback-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nparkison%2Freact-feedback-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nparkison%2Freact-feedback-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nparkison%2Freact-feedback-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nparkison%2Freact-feedback-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nparkison","download_url":"https://codeload.github.com/nparkison/react-feedback-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nparkison%2Freact-feedback-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31740265,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T03:27:07.512Z","status":"ssl_error","status_checked_at":"2026-04-13T03:26:53.610Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feedback-widget","frontend","javascript","react","responsive","storybook","supabase","tailwindcss","typescript","ui-components","user-feedback","vite"],"created_at":"2025-10-28T17:21:35.320Z","updated_at":"2026-04-13T04:32:04.784Z","avatar_url":"https://github.com/nparkison.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Feedback Widget\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Build Status](https://img.shields.io/circleci/build/github/nparkison/react-feedback-widget)](https://circleci.com/gh/nparkison/react-feedback-widget)\n\nA lightweight, backend-agnostic, and customizable feedback widget for React applications.\n\n---\n\n## Features\n\n*   **Backend Agnostic:** Connect to any backend by providing a simple `onSubmit` function.\n*   **Easy to Integrate:** Drop the component into any React or Next.js application.\n*   **Customizable:** Use props to control behavior and match your app's look and feel.\n*   **Supabase Example:** Includes a reference implementation for a Supabase backend (Edge Function + Database Migration).\n*   **Built with Tailwind CSS:** Easily customizable with standard Tailwind classes.\n\n## Development\n\nTo get started with development, clone the repository and install the dependencies.\n\n```bash\ngit clone https://github.com/nparkison/react-feedback-widget.git\ncd react-feedback-widget\nnpm install --legacy-peer-deps\n```\n\n### Running Storybook\n\nTo view and develop the components in isolation, run Storybook:\n\n```bash\nnpm run storybook\n```\n\n### Building the Project\n\nTo create the distributable files for the library, run the build script:\n\n```bash\nnpm run build\n```\n\n## Usage Example\n\n\u003e **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.\n\nImport the component and provide an `onSubmit` handler.\n\n```tsx\nimport { FeedbackWidget } from 'react-feedback-widget';\nimport 'react-feedback-widget/dist/style.css'; // Import styles after building the project\n\nconst App = () =\u003e {\n  const handleFeedbackSubmit = async (data: { rating: number; comment: string }) =\u003e {\n    // Your API call logic here\n    console.log('Feedback submitted:', data);\n    alert('Thank you for your feedback!');\n  };\n\n  return \u003cFeedbackWidget onSubmit={handleFeedbackSubmit} /\u003e;\n};\n\nexport default App;\n```\n\n## API Reference (Props)\n\n| Prop           | Type                                                             | Required | Default          | Description                                                                                             |\n| :------------- | :--------------------------------------------------------------- | :------- | :--------------- | :------------------------------------------------------------------------------------------------------ |\n| `onSubmit`     | `(data: { rating: number; comment: string }) =\u003e Promise\u003cvoid\u003e;`   | **Yes**  | `undefined`      | A function that is called when the user submits their feedback. It receives the data as an argument.     |\n| `user`         | `{ email?: string; }`                                            | No       | `{}`             | Optional user information to associate with the feedback.                                               |\n| `open`         | `boolean`                                                        | No       | `undefined`      | Controls the open/closed state of the widget. If provided, you must also provide `onOpenChange`.        |\n| `onOpenChange` | `(isOpen: boolean) =\u003e void`                                      | No       | `undefined`      | A callback function that is called when the widget's open state changes.                                |\n| `position`     | `'bottom-right' \\| 'bottom-left' \\| 'top-right' \\| 'top-left'`   | No       | `'bottom-right'` | The position of the trigger button on the screen.                                                       |\n| `texts`        | `{ title?: string; description?: string; submitText?: string; }` | No       | `{...}`          | An object to override the default text content for internationalization or customization.               |\n\n## Backend Integration Guide\n\n### Using with Supabase\n\nThis project includes a reference implementation for a Supabase backend. You can find the necessary files in the `examples/supabase/` directory.\n\n1.  **Deploy the Edge Function:**\n    Deploy the `handle-feedback` function from `examples/supabase/functions/handle-feedback/` to your Supabase project.\n\n2.  **Run the Database Migration:**\n    Execute the SQL script from `examples/supabase/migrations/` in your Supabase SQL editor to create the `feedback` table.\n\n3.  **Implement the `onSubmit` Handler:**\n    In your application, create a Supabase client and use it in the `onSubmit` prop to call your Edge Function.\n\n    ```tsx\n    import { FeedbackWidget } from 'react-feedback-widget';\n    import 'react-feedback-widget/dist/style.css';\n    import { createClient } from '@supabase/supabase-js';\n\n    // Initialize your Supabase client\n    const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');\n\n    const App = () =\u003e {\n      const handleFeedbackSubmit = async (data) =\u003e {\n        const { error } = await supabase.functions.invoke('handle-feedback', {\n          body: data, // The 'data' object contains { rating, comment }\n        });\n\n        if (error) {\n          console.error('Failed to submit feedback:', error);\n          alert('Sorry, something went wrong.');\n        } else {\n          alert('Feedback submitted successfully!');\n        }\n      };\n\n      return \u003cFeedbackWidget onSubmit={handleFeedbackSubmit} /\u003e;\n    };\n    ```\n\n## Contributing\n\nContributions are welcome! Please read our [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get started.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnparkison%2Freact-feedback-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnparkison%2Freact-feedback-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnparkison%2Freact-feedback-widget/lists"}