Introducing react-number-rating – A 1–10 React Rating Component for Better UI

🔥 Introduction

“The react-number-rating component helps you add clean, user-friendly numeric rating systems (1–10) in React apps with minimal setup.”

If you're building a feedback form, product rating, or any kind of review system in a React app, you’ve probably used stars, sliders, or emojis. But what if you want something more precise, clean, and customizable?

Introducing react-number-rating — a modern and developer-friendly rating component for React that displays a numeric scale from 1 to 10, with optional color coding to visually represent the score strength.

🔗 Live Demo

👉 Try it on CodeSandbox

✨ Features

✅ Numeric scale from 1 to 10
✅ Custom color for each number
✅ Easily style via props or CSS
✅ Lightweight – no external styling libraries
✅ Built with React 17/18 compatibility
✅ Perfect for feedback forms, review UIs, or product ratings

📦 Installation

Install via NPM:

npm install react-number-rating


🛠️ Usage Example

import React, { useState } from "react";
import PriorityRating from "react-number-rating";

export default function App() {
  const [priority, setPriority] = useState(5);
  return (
    <PriorityRating
      max={10}
      value={priority}
      name="priority"
      onChange={(val) => setPriority(val)}
    />
  );
}

💡 Tip: The onChange callback lets you hook into form logic easily.

⚙️ Props Breakdown

Prop	Type	Description
value	number	The current rating value (1–10)
onChange	func	Callback function when a rating is selected
activeColor	string	Color of selected rating numbers (default: #1976d2)
inactiveColor	string	Color of unselected numbers (default: #e0e0e0)
size	string	Size of the number buttons (small, medium, large)

🎯 Real-World Use Cases

• User feedback forms
• Product reviews
• Quiz or exam grading UI
• Habit tracking (e.g., rate your productivity)

🧑‍💻 About the Author

I’m Rajkumar, a passionate frontend engineer focused on building modular and reusable UI solutions. This is part of my effort to help developers quickly ship polished user experiences in React.

👉 GitHub
👉 Buy Me a Coffee

💖 Support the Project

If you find this useful, consider supporting me:

⭐ Star the repo on GitHub

🧑‍💻 Try it in your next React project

💸 Sponsor via GitHub

☕ Buy Me a Coffee

📌 Final Thoughts

react-number-rating is a tiny but powerful component that brings numeric clarity to user ratings in React apps. Whether you're building SaaS, dashboards, or mobile-first apps, it's plug-and-play ready.

Have suggestions or want to contribute? PRs are always welcome!