{"id":16731019,"url":"https://github.com/ndyag/react-rater","last_synced_at":"2025-04-04T18:05:18.601Z","repository":{"id":24713197,"uuid":"28124931","full_name":"NdYAG/react-rater","owner":"NdYAG","description":"⭐️ Interative \u0026 customizable star rater","archived":false,"fork":false,"pushed_at":"2023-10-06T16:15:47.000Z","size":4572,"stargazers_count":189,"open_issues_count":4,"forks_count":30,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-03-15T02:31:24.135Z","etag":null,"topics":["rater","react","react-component","star-rater"],"latest_commit_sha":null,"homepage":"https://rawgit.com/ndyag/react-rater/master/example/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NdYAG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-12-17T06:43:25.000Z","updated_at":"2024-01-29T14:08:27.000Z","dependencies_parsed_at":"2024-01-14T20:17:28.364Z","dependency_job_id":"37b8f0e2-55e2-4163-acaf-b19b5bfe9e43","html_url":"https://github.com/NdYAG/react-rater","commit_stats":{"total_commits":141,"total_committers":13,"mean_commits":"10.846153846153847","dds":0.7163120567375887,"last_synced_commit":"b716e6760d1ca39adfcaedd5bec7596d9af44db5"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-rater","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-rater/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-rater/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Freact-rater/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NdYAG","download_url":"https://codeload.github.com/NdYAG/react-rater/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226213,"owners_count":20904465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["rater","react","react-component","star-rater"],"created_at":"2024-10-12T23:35:33.067Z","updated_at":"2025-04-04T18:05:18.583Z","avatar_url":"https://github.com/NdYAG.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-rater\n\nStar rater [![Build Status](https://travis-ci.org/NdYAG/react-rater.svg?branch=master)](https://travis-ci.org/NdYAG/react-rater)\n\n![](https://user-images.githubusercontent.com/1396511/84562331-469ae280-ad86-11ea-9567-9d554b204138.gif)\n\n[Check out our new demo!](https://rawgit.com/ndyag/react-rater/master/example/index.html)\n\n## Install\n\n```\nnpm install react-rater\n```\n\n```js\nimport Rater from 'react-rater'\nimport 'react-rater/lib/react-rater.css'\n\n// ...\nrender() {\n  return (\u003cRater total={5} rating={2} /\u003e)\n}\n```\n\nNote: If your react version is under 16.8.0 without hooks support, please keep using react-rater@5\n\n## API\n\n```html\n\u003cRater total={} rating={} interactive={} onRate={} onRating={} /\u003e\n```\n\nAll attributes are optional.\n\n- `total`: Number, default 5\n- `rating`: Number, default 0\n- `interactive`: Boolean, default `true`. Create a read-only rater by setting this attribute to `false`.\n- `onRate`: `function({ rating })`. Callback to retrieve rating value. Called after rated.\n- `onRating`: `function({ rating })`. Callback to retrieve rating value. Called during rating (mouse moving between stars).\n- `onCancelRate`: `function({ rating })`. Called when mouse moves out from rater.\n\nFrom version 5.0.0, callback is split into `onRate` \u0026 `onRating` \u0026 `onCancelRate`. `onRate` is called when mouse click, while `onRating` is called when mouse moves between star components and `onCancelRate` is called when mouse leaves rater. Usually you only need `onRate`.\n\n### Read-only mode\n\nSet `interactive={false}` to create a read-only rater.\n\nIn read-only mode, `rating` could contain a fractional part like `3.6`. (Thanks to @devmtnaing)\n\n### Callback\n\n`onRate` \u0026 `onRating`\n\n(`rating` is passed with the React's [SyntheticEvent](https://facebook.github.io/react/docs/events.html))\n\n```\n{\n  rating: Number\n  ...syntheticEvent\n}\n```\n\n## Styling\n\n### The CSS way\n\n```scss\n$react-rater-link: #ccc !default; // color of star not rated\n$react-rater-hover: #666 !default; // color of star on hover\n$react-rater-active: #000 !default; // color of star rated\n```\n\n### The JS way\n\n`\u003cRater /\u003e` will repeat its children until counts reach `total`. https://github.com/NdYAG/react-rater/blob/master/src/index.js#L69\n\nIn this way you can define your own 'star' component ([src/star.js](https://github.com/NdYAG/react-rater/blob/master/src%2Fstar.js)).\n\n```html\n\u003cRater total={5}\u003e\n  \u003cHeart /\u003e\n\u003c/Rater\u003e\n```\n\nand style it based on these props:\n\n```\n{\n  isActive: PropTypes.bool,\n  isActiveHalf: PropTypes.bool,\n  willBeActive: PropTypes.bool,\n  isDisabled: PropTypes.bool\n}\n```\n\n## Real world example\n\nValentine's Day:\n\n![Valentine](https://user-images.githubusercontent.com/1396511/84562283-ee63e080-ad85-11ea-877e-0048b3bdbc97.png)\n\nAbilu judge system for Douban Music:\n\n![Abilu judge system for Douban Muisc](http://i.imgur.com/fbrX3mg.png)\n\n## License\n\nBSD.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndyag%2Freact-rater","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndyag%2Freact-rater","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndyag%2Freact-rater/lists"}