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;

Available props

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Twitter - https://twitter.com/siamahnaf198
• Github - https://github.com/siamahnaf