@yannickbaze/star-rating 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yannick Baze
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# ⭐ Star Rating React Component
+
+A lightweight, customizable, and reusable star rating component for React applications.
+
+Perfect for product reviews, feedback systems, and user ratings.
+
+---
+
+## ✨ Features
+
+* ⭐ Interactive star rating UI
+* 🎨 Custom colors and sizes
+* 🖱️ Hover preview before selecting
+* 💬 Optional rating messages
+* ⚡ Lightweight and easy to use
+* ♻️ Fully reusable component
+
+---
+
+## 📦 Installation
+
+```bash
+npm install star-rating-react-component
+```
+
+or
+
+```bash
+yarn add star-rating-react-component
+```
+
+---
+
+## 🚀 Usage
+
+```jsx
+import StarRating from "star-rating-react-component";
+
+function App() {
+  return (
+    <StarRating
+      maxRating={5}
+      messages={["Bad", "Okay", "Good", "Very Good", "Excellent"]}
+      onSetRating={(rating) => console.log(rating)}
+    />
+  );
+}
+
+export default App;
+```
+
+---
+
+## ⚙️ Props Default Values 
+
+`maxRating: 5 (number)`
+`defaultRating: 0 (number)`
+`color: #fcc419 (string)`
+`size: 30 (number)`
+`messages: 5 ([])`
+`className: - (string)`
+`onSetRating: 5 (function, callback when rating is selected)`
+
+| Prop            | Type     | Default   | Description                      |
+| --------------- | -------- | --------- | -------------------------------- |
+| `maxRating`     | number   | `5`       | Total number of stars            |
+| `defaultRating` | number   | `0`       | Initial rating value             |
+| `color`         | string   | `#fcc419` | Star color                       |
+| `size`          | number   | `30`      | Star size in pixels              |
+| `messages`      | string[] | `[]`      | Text shown for each rating       |
+| `className`     | string   | —         | Custom CSS class                 |
+| `onSetRating`   | function | —         | Callback when rating is selected |
+
+---
+
+## 🎨 Customization Example
+
+```jsx
+<StarRating
+  maxRating={10}
+  size={40}
+  color="tomato"
+  messages={[
+    "Terrible",
+    "Bad",
+    "Okay",
+    "Good",
+    "Great",
+    "Excellent",
+    "Amazing",
+    "Superb",
+    "Outstanding",
+    "Perfect",
+  ]}
+/>
+```
+
+---
+
+## 🧠 How It Works
+
+* Hover over stars to preview rating
+* Click to select a rating
+* Optional messages update dynamically
+* Callback returns selected value
+
+---
+
+## 🛠️ Example With Callback
+
+```jsx
+<StarRating
+  onSetRating={(rating) => alert(`You rated: ${rating}`)}
+/>
+```
+
+---
+
+## 📄 License
+
+MIT © 2026
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+If you like this project, give it a ⭐ on GitHub.

package/index.js

@@ -0,0 +1,3 @@
+import StarRating from "./src/StarRating";
+
+export default StarRating;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@yannickbaze/star-rating",
+  "version": "1.0.0",
+  "description": "Reusable star rating component for React",
+  "main": "index.js",
+  "files": [
+    "src",
+    "index.js",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "star-rating",
+    "rating-component",
+    "ui",
+    "react-component"
+  ],
+  "author": "Yannick Baze",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yannickbaze/star-rating.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yannickbaze/star-rating/issues"
+  },
+  "homepage": "https://github.com/yannickbaze/star-rating#readme"
+}

package/src/StarRating.js

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+const container = {
+    display: "flex", 
+    alignItems: "center", 
+    gap: "16px"
+}
+
+const starContainerStyle = {
+    display: "flex", 
+    gap: "4px"
+}
+
+
+StarRating.protoTypes = {
+  maxRating: PropTypes.number,
+  defaultRating: PropTypes.number,
+  color: PropTypes.string,
+  size: PropTypes.number,
+  messages: PropTypes.array,
+  className: PropTypes.string,
+  onSetRating: PropTypes.func,
+}
+
+
+export default function StarRating({
+  maxRating = 5,
+  color = "#fcc419",
+  size = 30,
+  className,
+  messages = [], 
+  defaultRating = 0,
+  onSetRating,
+})
+
+{
+  const [rating, setRating] = useState(defaultRating);
+  const [tempRating, setTempRating] = useState(0);
+
+  function handleRating(rating)
+  {
+    setRating(rating)
+    if (onSetRating) onSetRating(rating)
+  }
+  
+  const textStyle = {
+    lineHeight: "1",
+    margin: "0",
+    color,
+    fontSize: `${size / 1.5}px`,
+   
+  };
+
+
+    return (
+      <div style={container} className={ className }>
+        <div style={starContainerStyle}>
+          {Array.from({ length: maxRating }, (_, i) => (
+            <Star
+              key={i}
+              onRate={() => handleRating(i + 1)}
+              full={tempRating ? tempRating >= i + 1 : rating >= i + 1}
+              onHoverIn={() => setTempRating(i + 1)}
+              onHoverOut={() => setTempRating(0)}
+              color={color}
+              size={size}
+            />
+          ))}
+        </div>
+        <p style={textStyle}>
+          {messages.length === maxRating ?
+            messages[tempRating ? tempRating - 1 : rating - 1] : tempRating || rating || ""}</p>
+      </div>
+    );
+}
+
+
+
+function Star({ onRate, full, onHoverIn, onHoverOut, color, size })
+{
+  const starStyle = {
+    width: `${size}px`,
+    height: `${size}px`,
+    display: "block",
+    cursor: "pointer"
+  };
+    return (
+      <span
+        style={starStyle}
+        onClick={onRate}
+        onMouseEnter={onHoverIn}
+        onMouseLeave={onHoverOut}>
+        {full ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill={color}
+            stroke={color}>
+            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+          </svg>
+        ) : (
+          <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke={ color }>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+            />
+          </svg>
+        )}
+      </span>
+    );
+}
+
+
+/*
+FULL STAR
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 20 20"
+  fill="#000"
+  stroke="#000"
+>
+  <path
+    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+  />
+</svg>
+
+
+EMPTY STAR
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="#000"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="{2}"
+    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+  />
+</svg>
+
+*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+