DEV Community

Cover image for Simple React library for collecting user feedback (opensource)
Alex
Alex

Posted on

Simple React library for collecting user feedback (opensource)

#react #javascript #showdev #opensource

Collecting user feedback in React usually means choosing between bloated libraries, iframe embeds, vendor lock-in, or building everything from scratch.

This library offers a simpler path: four survey components, zero dependencies, complete control over where your data goes, and just 18KB.

Install and add your first survey 

npm install react-feedback-surveys
Enter fullscreen mode Exit fullscreen mode 
import { CSAT5Survey } from 'react-feedback-surveys';
import 'react-feedback-surveys/index.css';

function App() {
  return (
    <CSAT5Survey
      question="How would you rate your satisfaction with our product?"
      scaleStyle="emoji"
      minLabel="Very dissatisfied"
      maxLabel="Very satisfied"
      thankYouMessage="Thanks for your feedback!"
      onScoreSubmit={(data) => console.log(data)}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

That's a working customer satisfaction survey with accessibility support, mobile-friendly styling, and a callback ready for your backend.

CSAT5 Survey

CSAT5 Survey in action

Four survey types for different use cases

The library includes four industry-standard survey components, each designed for specific feedback scenarios:

CSAT5 Survey (Customer Satisfaction Score) uses a 1-5 scale and works best for measuring satisfaction after specific interactions. Display it as stars, emojis, or numbers. Ask users "How satisfied are you with this feature?" after they complete a task or interact with support.

CSAT5 Survey

CSAT2 Survey (Customer Satisfaction Score) is a simple thumbs up/down or emoji-based binary choice. Great for quick pulse checks where you just need to know if something was good or bad.

CSAT2 Survey

NPS10 Survey (Net Promoter Score) uses a 0-10 scale to measure overall product sentiment. The classic "How likely are you to recommend us?" question helps you identify promoters, passives, and detractors over time.

NPS10 Survey

CES7 Survey (Customer Effort Score) measures how easy something was to accomplish on a 1-7 scale. Use it after checkout flows, onboarding sequences, or any multi-step process where friction matters.

CES7 Survey

Multiple scale styles

Each survey type supports different visual styles through the scaleStyle prop:

// Stars for CSAT5
<CSAT5Survey scaleStyle="stars" ... />

// Emojis for CSAT5 or CSAT2
<CSAT5Survey scaleStyle="emoji" ... />

// Thumbs up/down for CSAT2
<CSAT2Survey scaleStyle="thumbs" ... />

// Numbers for NPS10 and CES7
<NPS10Survey scaleStyle="numbers" ... />
Enter fullscreen mode Exit fullscreen mode

Customization options

Configure labels, follow-up questions, and visual styling to match your brand:

<CSAT5Survey
  question="How would you rate your experience?"
  scaleStyle="stars"
  minLabel="Poor"
  maxLabel="Excellent"
  thankYouMessage="We appreciate your feedback!"
  responseType="text"
  textQuestion="What could we improve?"
  textButtonLabel="Submit"
  onScoreSubmit={handleScore}
  onFeedbackSubmit={handleFeedback}
/>
Enter fullscreen mode Exit fullscreen mode

For deeper customization, pass a classNames object to target specific elements:

<CSAT5Survey
  question="How would you rate your experience?"
  scaleStyle="stars"
  thankYouMessage="Thanks!"
  classNames={{
    base: { base: 'my-survey', title: 'my-title' },
    scale: { button: 'my-scale-button', labels: 'my-labels' }
  }}
  onScoreSubmit={handleScore}
/>
Enter fullscreen mode Exit fullscreen mode

The library also supports dark mode and RTL text direction out of the box.

Send responses anywhere

The library doesn't store or transmit any data on its own. Your callbacks receive plain JavaScript objects that you can send wherever makes sense for your stack:

// onScoreSubmit receives:
{ value: 4 }

// onFeedbackSubmit receives (if you enable follow-up):
{ value: 4, text: "Love the new dashboard!" }
Enter fullscreen mode Exit fullscreen mode

Here's an example with a custom API endpoint:

<NPS10Survey
  question="How likely are you to recommend us?"
  scaleStyle="numbers"
  thankYouMessage="Thanks!"
  onScoreSubmit={async (data) => {
    await fetch('/api/feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
  }}
/>
Enter fullscreen mode Exit fullscreen mode

What's included

  • Zero external dependencies beyond React itself
  • Full TypeScript support with exported type definitions
  • Multiple scale styles including stars, emojis, thumbs, and numbers
  • Follow-up questions with text input or multiple choice options
  • Dark mode support via CSS classes or media queries
  • RTL support for right-to-left languages
  • Mobile-responsive design that works across screen sizes

What's not included

The library focuses on UI only, giving you full control over data storage and backend integration.

If you prefer a ready-to-go solution with AI-powered analysis, trend detection, and a dashboard, feedback.tools does all of that without any backend work.

Get started 

npm install react-feedback-surveys
Enter fullscreen mode Exit fullscreen mode

Full documentation, API reference, and more examples are available on GitHub.

If this library saves you time, consider giving it a star on GitHub. It helps others discover the project and keeps us motivated to improve it.

Top comments (0)