Next-rating-component NPM

⚠️ Package Renamed & No Longer Maintained

This package has been renamed to `@siamf/rating`

Please use `@siamf/rating` instead.

This package is no longer maintained. For the latest updates and improvements, migrate to:

👉 @siamf/rating

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

$ npm i next-rating-component

App Router

"use client"
import { useState } from "react";
import { Rating } from "next-rating-component";

const MyComponent = () => {
    const [rating, setRating] = useState<number>(0);


    return (
        <div>
            <Rating
                value={rating}
                onChange={(e) => setRating(e)}
                fractions={0.1}
            />
        </div>
    );
};

export default MyComponent;