Simple React library for collecting user feedback (opensource)

Alex — Fri, 16 Jan 2026 18:39:28 +0000

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

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)}
    />
  );
}

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

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.

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.

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.

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.

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" ... />

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}
/>

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}
/>

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!" }

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)
    });
  }}
/>

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

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.

DEV Community: Alex