{"id":25628403,"url":"https://github.com/siamahnaf/rating","last_synced_at":"2026-02-26T15:33:13.796Z","repository":{"id":274921331,"uuid":"924499315","full_name":"siamahnaf/rating","owner":"siamahnaf","description":"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.","archived":false,"fork":false,"pushed_at":"2026-01-02T09:08:31.000Z","size":130,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-08T08:03:53.862Z","etag":null,"topics":["e-commerce","e-commerce-rating","next-rating","nextjs-rating-component","react-next","react-rating","react-rating-component","react-rating-star","simple-rating-component"],"latest_commit_sha":null,"homepage":"https://rating-demo.siamahnaf.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siamahnaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-30T05:44:51.000Z","updated_at":"2026-01-02T09:08:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"3100e45a-1c2a-423f-9c2f-aaee12c46cf8","html_url":"https://github.com/siamahnaf/rating","commit_stats":null,"previous_names":["siamahnaf/rating"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siamahnaf/rating","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Frating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Frating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Frating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Frating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siamahnaf","download_url":"https://codeload.github.com/siamahnaf/rating/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Frating/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29863395,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T08:51:08.701Z","status":"ssl_error","status_checked_at":"2026-02-26T08:50:19.607Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-commerce","e-commerce-rating","next-rating","nextjs-rating-component","react-next","react-rating","react-rating-component","react-rating-star","simple-rating-component"],"created_at":"2025-02-22T18:30:49.612Z","updated_at":"2026-02-26T15:33:13.791Z","avatar_url":"https://github.com/siamahnaf.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/siamahnaf"],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-white.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png\"\u003e\n  \u003cimg alt=\"Siam Ahnaf\" src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png\" height=\"auto\" width=\"240\"\u003e\n\u003c/picture\u003e\n\u003cbr/\u003e \u003cbr/\u003e\n\n# @siamf/rating\nI'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.\n\n\u003ca href=\"https://www.buymeacoffee.com/siamahnaf\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n- Small in Size\n- Zero Dependency\n- Fractional step (It support any fractional value)\n- Custom Icon\n- All necessary options\n\n# Demo\nSee \u003ca href=\"https://rating-demo.siamahnaf.com/\"\u003eLive Demo\u003c/a\u003e\n\n# Installation\n\n```bash\n$ npm i @siamf/rating\n```\n\n# App Router\n```javascript\n\"use client\"\nimport { useState } from \"react\";\nimport { Rating } from \"@siamf/rating\";\n\nconst MyComponent = () =\u003e {\n    const [rating, setRating] = useState\u003cnumber\u003e(0);\n\n    return (\n        \u003cdiv\u003e\n            \u003cRating\n                value={rating}\n                onChange={(e) =\u003e setRating(e)}\n                fractions={0.1}\n            /\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default MyComponent;\n```\n\n# Available props\n\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e maxRating \u003c/td\u003e\n    \u003ctd\u003e Rating star count \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 5 \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e value \u003c/td\u003e\n    \u003ctd\u003e The value of rating (You can use Rating component with controls using this value prop) \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e Required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e icon \u003c/td\u003e\n    \u003ctd\u003e Change the icon of Rating Component (Only SVG Icon supported) \u003c/td\u003e\n     \u003ctd\u003e React Element \u003c/td\u003e\n    \u003ctd\u003e Optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e fractions \u003c/td\u003e\n    \u003ctd\u003e Fractional Step For Icon \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 1 \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onChange \u003c/td\u003e\n    \u003ctd\u003e The new rating value when clicked \u003c/td\u003e\n     \u003ctd\u003e (newRating)=\u003e void \u003c/td\u003e\n    \u003ctd\u003e Optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onHover \u003c/td\u003e\n    \u003ctd\u003e The new rating value when hovered \u003c/td\u003e\n     \u003ctd\u003e (newRating)=\u003e void \u003c/td\u003e\n    \u003ctd\u003e ease \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e readOnly \u003c/td\u003e\n    \u003ctd\u003e The interactivity of the icon \u003c/td\u003e\n     \u003ctd\u003e boolean \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e Size \u003c/td\u003e\n    \u003ctd\u003e The Size of the Icon \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 24 \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e emptyColor \u003c/td\u003e\n    \u003ctd\u003e The color of the empty Icon \u003c/td\u003e\n     \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e #dfe2e6 \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e fillColor \u003c/td\u003e\n    \u003ctd\u003e The color of the fill Icon \u003c/td\u003e\n     \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e #fab005 \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e toolTip \u003c/td\u003e\n    \u003ctd\u003e For showing tooltip \u003c/td\u003e\n     \u003ctd\u003e boolean \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e customTooltip \u003c/td\u003e\n    \u003ctd\u003e Custom tooltip for every step. Here step will 2 decimal position number for each step \u003c/td\u003e\n     \u003ctd\u003e {step:number, text:string}[] \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Connect with me\n\u003cdiv style=\"display: flex; align-items: center; gap: 3px;\"\u003e\n\u003ca href=\"https://wa.me/8801611994403\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/whatsapp.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://siamahnaf.com/\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/web.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/siamahnaf/\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/linkedin.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://x.com/siamahnaf198\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/x.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.facebook.com/siamahnaf198/\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/facebook.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://t.me/siamahnaf198\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/telegram.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/~siamahnaf\" style=\"margin-right: 8px\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/npm.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Frating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiamahnaf%2Frating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Frating/lists"}