https://github.com/siamahnaf/rating
A React rating component that supports Next.js SSR and allows fractional step ratings for precise user input. The component is customizable, lightweight, and optimized for performance.
https://github.com/siamahnaf/rating
e-commerce e-commerce-rating next-rating nextjs-rating-component react-next react-rating react-rating-component react-rating-star simple-rating-component
Last synced: about 1 month ago
JSON representation
A React rating component that supports Next.js SSR and allows fractional step ratings for precise user input. The component is customizable, lightweight, and optimized for performance.
- Host: GitHub
- URL: https://github.com/siamahnaf/rating
- Owner: siamahnaf
- Created: 2025-01-30T05:44:51.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-30T06:22:35.000Z (4 months ago)
- Last Synced: 2025-03-24T01:07:20.695Z (about 2 months ago)
- Topics: e-commerce, e-commerce-rating, next-rating, nextjs-rating-component, react-next, react-rating, react-rating-component, react-rating-star, simple-rating-component
- Language: TypeScript
- Homepage: https://rating-demo.siamahnaf.com/
- Size: 68.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next Rating Component
I've been searching for a reliable React rating component for Next.js with server-side rendering (SSR) support and essential features like fractional ratings. After trying several existing libraries over the past five days, I've found that many either don't work well with SSR, lack crucial functionality, or don't support fractions. Therefore, I've decided to build my own customizable rating component in TypeScript to meet common project needs.
- Small in Size
- Zero Dependency
- Fractional step (It support any fractional value)
- Custom Icon
- All necessary options
# Demo
See Live Demo
# Installation
```bash
$ npm i @siamf/rating
```
# App Router
```javascript
"use client"
import { useState } from "react";
import { Rating } from "@siamf/rating";
const MyComponent = () => {
const [rating, setRating] = useState(0);
return (
setRating(e)}
fractions={0.1}
/>
);
};
export default MyComponent;
```
# Available props
Name
Description
Type
Default/Required
maxRating
Rating star count
number
5
value
The value of rating (You can use Rating component with controls using this value prop)
number
Required
icon
Change the icon of Rating Component (Only SVG Icon supported)
React Element
Optional
fractions
Fractional Step For Icon
number
1
onChange
The new rating value when clicked
(newRating)=> void
Optional
onHover
The new rating value when hovered
(newRating)=> void
ease
readOnly
The interactivity of the icon
boolean
false
Size
The Size of the Icon
number
24
emptyColor
The color of the empty Icon
string
#dfe2e6
fillColor
The color of the fill Icon
string
#fab005
toolTip
For showing tooltip
boolean
false
customTooltip
Custom tooltip for every step. Here step will 2 decimal position number for each step
{step:number, text:string}[]
optional
# Stay in touch
- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)