[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":-5,"_112":113,"_114":115},"routes/pages/tag.$tagName",{"_9":10,"_11":12,"_13":12,"_14":12,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28},"posts",[29],"page",1,"totalPages","totalItems","perPage",12,"siteUrl","https://lazypandatech.com","routeTag","star-rating","canonicalUrl","https://lazypandatech.com/tag/star-rating","humanTag","Star Rating","adClient","ca-pub-2711385747041353","adSlot","3475181432",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_21":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":64,"_70":71,"_72":73,"_74":75,"_76":51},"id","cdam9ouij0vnz02","title","Custom Star Rating component using React or NextJs","slug","star-rating-reactjs","author","LazyPanda","date","2021-03-24","heroUrl","https://storage.googleapis.com/lazy-panda-tech-1586624890532.appspot.com/ratings-1778307642242.png","heroAlt","nextjs start rating component","tags",[106,107,108],"body","

Star Rating system is everywhere, it shows the impression to the user, how the product is. In this article, I will create a star rating component using react and convert 0 - 100% (percent) value into 1 to 5-star representation. It looks as follows -

To make this guide easier to discover and more relevant for readers, it now naturally covers react star rating, nextjs star rating, react component, custom react star, star rating component, and react rating component.

$\"React$

There are several in build libraries are available to create such component, then why still we are seeing to implement something in custom way? Here is the comparison, that could lead to understand properly why custom components are needed.

Custom components are designed as per the design system, a zero dependency on library, and ship code only what is needed. The component can be grown as per any future requirement.

Let's get started by creating an application using the create-react-app command like the below -

npx create-react-app rating-app

Then create a ratings.js and ratings.module.css file. Here, the idea is we are going to deal with two sets of star icons. One with filled with a golden colour and another is filled with white colour. Here is the two icon look like -

SVG icon (filled star):

<svg fill=\"none\" height=\"{height}\" viewBox=\"0 0 24 24\" width=\"{width}\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M12 4.5L14.3175 9.195L19.5 9.9525L15.75 13.605L16.635 18.765L12 16.3275L7.365 18.765L8.25 13.605L4.5 9.9525L9.6825 9.195L12 4.5Z\" fill=\"#EBC03F\" stroke=\"#EBC03F\" strokelinecap=\"round\" strokelinejoin=\"round\" strokewidth=\"2\"></path> </svg>

$\"filled$

SVG icon (outline):

<svg fill=\"none\" height=\"{height}\" viewBox=\"0 0 24 24\" width=\"{width}\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M12.1053 3.68421L14.7074 8.95579L20.5263 9.80632L16.3158 13.9074L17.3095 19.7011L12.1053 16.9642L6.90105 19.7011L7.89473 13.9074L3.6842 9.80632L9.50315 8.95579L12.1053 3.68421Z\" fill=\"#FCFBF8\" stroke=\"#E2E0DA\" strokelinecap=\"round\" strokelinejoin=\"round\"></path> </svg>

$\"outline$

Understanding the initialisations, props, and callback -

The Rating component has a few props for configuration for your needs -

Rating.propTypes = { ratingInPercent: number.isRequired, iconSize: string, showOutOf: bool.isRequired, enableUserInteraction: bool.isRequired, onClick: func };

ratingInPercent:
iconSize:
showOutOf:
enableUserInteraction:
onClick:

Demo time:

So, the custom rating component is ready to use, feel free to modify yourself based on your needs.

Happy Coding!

-LazyPanda

","status","published","publishedAt","2026-05-09 06:53:20.900Z","createdBy","bvnwzsaaejxf2qp","metaDescription","Learn to build a custom star rating component in React or Next.js from scratch. This tutorial shows how to convert percentage values into a 1-5 star system.","keywords",[91,92,93,94,95,96,97,98,99,100],"https://lazypandatech.com/blog/star-rating-reactjs","ogTitle","Build a Custom Star Rating Component in React & Next.js","ogDescription","Follow this guide to build your own star rating component. Learn how to translate a percentage score into a visual 1-to-5 star display in React or Next.js.","ogImage","","twitterTitle","How to Build a Star Rating Component in React & Next.js","twitterDescription","A step-by-step tutorial for building a reusable star rating component from scratch. Convert a 0-100% value into a 1-5 star UI for your React/Next.js app.","twitterImage","jsonLd",{"_77":78,"_79":80,"_36":81,"_82":39,"_83":55,"_84":33,"_85":86,"_87":88,"_56":89,"_90":58},"relatedLinks",[],"created","2026-04-24 14:34:43.719Z","updated","@context","https://schema.org","@type","BlogPosting",{"_79":105,"_102":37},"datePublished","description","headline","image",{"_79":104,"_90":41},"isPartOf",{"_79":101,"_102":103,"_90":18},[91,92,93,94,95,96,97,98,99,100],"url","react star rating","nextjs star rating","star rating component","react component","build react component","custom react star","react rating component","how to create star rating react","build custom star rating component react","custom star rating nextjs tutorial","WebSite","name","LazyPandaTech Blog","ImageObject","Person","NextJs","React","Star-Rating","commit","unknown","user","analyticsEnabled","true","ga4MeasurementId","G-T1LQ6R6VY5"]

Star Rating Articles

Custom Star Rating component using React or NextJs