Start Collecting Feedback from Users across Your React Apps with Feeder.sh
Using the feeder-react-feedback library to start collecting user feedback across React apps in under 5 minutes
feeder-react-feedback is an npm package I created that provides a <Feedback/> React component that developers can hook up to projects on Feeder’s admin dashboard. The admin dashboard is where developers can create projects and view all collected feedback across their projects.
In short, Feeder is a turnkey (not to mention free) solution for developers to begin collecting feedback across their React apps:
- Collect Feedback: Collect and view feedback for across your React apps in a sortable data table as part of Feeder’s admin dashboard (data table includes, where applicable, Date, Subproject, Path, Email, Type, and Message fields; see above screenshot for example)
- Customize Freely: Match the component to your project’s style guide and color scheme (see props for more information)
- Share Projects: Add unlimited collaborators to projects
- Export your Data: Export project-specific feedback to CSV
Feel free to visit the demo/playground and play around with the Feedback component’s props or to view the Github Repo & Documentation. If you want to see what it looks like in a production application, as of July ’20, Feeder is currently being used by the team over at Exponent as well as in IB Vine (personal project).
Getting Started in 3 steps
Get up and running in a matter of minutes.
1. Install the NPM package
npm install feeder-react-feedback
2. Import the component and stylesheet
You can render the component globally or have the component be scoped to a specific page.
If you want the Feedback trigger to be included on every page, add the <Feedback/> component to your Layout/Wrapper/Global App component. Alternatively, if you want the Feedback trigger to be included on certain pages, embed the <Feedback/> component in that specific page.
See “Tips” section at bottom of post if using a SSR React framework such as Gatsby or Next (I’m using this package in a Gatsby project here).
3. Create an Account and Project on Feeder’s admin dashboard
Copy the Project Id from the project on the admin dashboard and pass it as a prop to the <Feedback/> component (see all accepted props here).
<Feedback projectId="5efe50xa76s26a00049c29b4"/>Final Thoughts
I created this project to solve a personal problem as a hobby developer. After looking for ways to collect feedback from users in a way that was effortless for users and developers, I created Feeder — a solution that, in my eyes, served my purpose better than requiring users to send an email to deliver feedback. This project was developed by and for the hobby developer, but should suit the needs of any sized project. I hope you find the project/package helpful.
Finally, I’ve included some extra tips and tricks below on maximizing the utility from Feeder.
Extra Tips
Using feeder-react-feedback with SSR frameworks
If you are using SSR React frameworks such as Gatsby or Next, you may run into something similar to the following error:
WebpackError: ReferenceError: document is not defined
During SSR, there is no window or document object (which exists in the browser), so any module that relies on either of those objects will throw an error. The best workaround is to use a package such as loadable-components, which will dynamically load the module on the client side (and not during SSR). I’ve tested this with a Gatsby app of mine and its a good workaround.
After installing loadable-components (npm install @loadable/component ), you would import the Feedback component as follows:
Default Email Value
While it is possible to specify the inclusion of an email input field, you can set a default value for the email address while hiding the input field, thereby reducing user effort. This is especially relevant if/when you have access to an authenticated user’s email in a global store such as Redux or the Context API.
Subprojects
If you want to embed the Feedback component on multiple pages in the same web app/website but be able to distinguish between which page you are on, consider setting the subProject prop. That way, you can use a single top-level project name instead of creating different projects for each page you want to include the Feedback component on.
