UI package: Gather user feedback in your React apps

I spent the weekend diving into publishing an npm package that I'm thrilled to introduce: react-user-feedback. If you're a React/FE developer, you know the importance of collecting user feedback to continually improve your applications.

react-user-feedback is an npm package I created that provides a <UserFeedback/> React UI component powered by the dynamic combination of TailwindCSS, shadcn/ui, zod and react-hook-form.

Now it’s time to get started:

1. Install the NPM package

npm install @ntheanh201/react-user-feedback

2. Import the component and stylesheet

You can render the component globally or have the component be scoped to a specific page.

import UserFeedback from "@ntheanh201/react-user-feedback";

// tailwindcss, shadcn/ui
import "@ntheanh201/react-user-feedback/dist/styles.css";

function App() {
  return (
        <UserFeedback
          disabled={false}
          allowImage={true}
          feedbackTypes={[
            { value: "general", label: "General" },
            { value: "bug", label: "Bug" },
            { value: "idea", label: "Idea" },
          ]}
          onSubmit={(values, onError) => {
            console.log("values: ", values);
          }}
        />
  );
}

3. Collect valuable feedback

That's it! One more step is that you need to send the feedback to your server and you're ready to gather user feedback efficiently and effectively in your React application.

Enjoy the benefits of react-user-feedback and elevate your development process.

I created it to solve a personal problem as a hobby developer. I hope you find the package helpful. If you wanna contribute to this package, feel free to check: https://github.com/ntheanh201/react-user-feedback#contributing

Happy coding!