feeder-react-feedback

Feeder: feeder-react-feedback

Embeddable Feedback React component hooked up to an admin dashboard. The fastest way to start collecting feedback across your React projects! ⚡

Quick Links

External

• Component Demo/Playground
• Admin Dashboard

Documentation

• Features
• Install via NPM
• Usage
• Props
• FAQs
  • What is the Admin Dashboard?
  • Usage with SSR React Frameworks (e.g. Gatsby, Next)
• Tips

Features

• Collect Feedback: Collect and view feedback for across your react projects in a sortable data table
• 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

Install via NPM

npm install feeder-react-feedback

Usage

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.

import Feedback from "feeder-react-feedback"; // import Feedback component
import "feeder-react-feedback/dist/feeder-react-feedback.css"; // import stylesheet
 
class App extends Component {
  render() {
    // See all customizable props below
    return <Feedback projectId="PROJECT_ID_FROM_ADMIN_APP" />;
  }
}

After importing the component, create an Account/Project on the admin dashboard and pass in your project's projectId as a prop to the Feedback component.

Props

prop	description	type	required	default
projectId	Unique project id from admin app	string	yes	null
email	Whether email input field is included	boolean	no	false
emailRequired	Whether email input field, if included, is required	boolean	no	false
emailDefaultValue	Default value for email input field	string	no	null
feedbackTypes	Specify exactly 2 or 3 custom feedback types	array of strings	no	["general", "bug", "idea"]
hoverBorderColor	Hover, active and focus border color (inputs, button) - can accept any value that is valid for the CSS3 color property (hex, rgba, etc.)	string	no	"#000000"
postSubmitButtonMsg	Submit button text after submission	string	no	"Thanks!"
projectName	Project's top-level name	string	no	null
primaryColor	Primary color (header, buttons, trigger) - can accept any value that is valid for the CSS3 color property (hex, rgba, etc.)	string	no	"#ffffff"
submitButtonMsg	Submit button text	string	no	"Send Feedback"
subProject	Project within top-level project	string	no	null
textColor	Text color - can accept any value that is valid for the CSS3 color property (hex, rgba, etc.)	string	no	"#000000"
zIndex	z-index of Modal and Trigger Button	string	no	"100000000"

FAQs

What is the Admin Dashboard?

The admin dashboard is where all the feedback for each project is collected. Each project has a unique id that is passed as a prop to the <Feedback/> component.

You can add collaborators to each project as well, which will give them the ability to view all the feedback for a given project. The admin dashboard also allows users to export all project-specific data to CSV.

Will this work with SSR React 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 builds, there is no window or document object (which exists in the browser). For now, your best bet is to use a lightweight package such as loadable-components, which will dynamically load the module on the client side (and not during SSR).

import loadable from "@loadable/component"; // npm install @loadable/component
const Feedback = loadable(() => import("feeder-react-feedback/dist/Feedback")); // dynamically load Feedback component
import "feeder-react-feedback/dist/feeder-react-feedback.css"; // import stylesheet
 
class App extends Component {
  render() {
    return <Feedback projectId="PROJECT_ID_FROM_ADMIN_APP" />;
  }
}

Tips

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 relevent if/when you have access to an authenticated user's email in a global store such as Redux or the Context API.

class App extends Component {
  render() {
    return (
      <Feedback
        defaultEmailValue={this.props.user.email}
        projectId="PROJECT_ID_FROM_ADMIN_APP"
      />
    );
  }
}

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.

class ExampleComponentA extends Component {
  render() {
    return <Feedback subProject="Project A" projectId="SAME_PROJECT_ID" />;
  }
}
 
class ExampleComponentB extends Component {
  render() {
    return <Feedback subProject="Project B" projectId="SAME_PROJECT_ID" />;
  }
}