{"id":21481579,"url":"https://github.com/ekeric13/react-ratings-declarative","last_synced_at":"2025-08-09T22:07:05.971Z","repository":{"id":57343138,"uuid":"119913702","full_name":"ekeric13/react-ratings-declarative","owner":"ekeric13","description":"A customizable rating component for selecting x widgets or visualizing x widgets","archived":false,"fork":false,"pushed_at":"2020-01-02T11:19:07.000Z","size":666,"stargazers_count":44,"open_issues_count":9,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-30T20:40:22.871Z","etag":null,"topics":["component","declarative","icons","input","rater","rating","react","react-component","react-declarative","react-ratings","star-rating","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://codepen.io/ekeric13/project/full/DkJYpA/","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/ekeric13.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}},"created_at":"2018-02-02T01:12:27.000Z","updated_at":"2025-05-03T10:35:31.000Z","dependencies_parsed_at":"2022-09-17T06:21:24.916Z","dependency_job_id":null,"html_url":"https://github.com/ekeric13/react-ratings-declarative","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ekeric13/react-ratings-declarative","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekeric13%2Freact-ratings-declarative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekeric13%2Freact-ratings-declarative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekeric13%2Freact-ratings-declarative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekeric13%2Freact-ratings-declarative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ekeric13","download_url":"https://codeload.github.com/ekeric13/react-ratings-declarative/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekeric13%2Freact-ratings-declarative/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269644872,"owners_count":24452636,"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","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component","declarative","icons","input","rater","rating","react","react-component","react-declarative","react-ratings","star-rating","svg","svg-icons"],"created_at":"2024-11-23T12:27:03.632Z","updated_at":"2025-08-09T22:07:05.941Z","avatar_url":"https://github.com/ekeric13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Ratings Declarative\n\n\u003e A customizable rating component for selecting x widgets or visualizing x widgets. SVG stars that show aggregate star ratings to the hundreths decimal point.\n\n## [Install](https://www.npmjs.com/package/react-ratings-declarative)\n\n```shell\nnpm install --save react-ratings-declarative\n```\n\n## Demo\n\n### [codepen playground](https://codepen.io/ekeric13/project/full/DkJYpA/)\n\n\n### Demo Example Image\n\n![](http://i.imgur.com/5CwWVam.png)\n\n## Usage\n\n```js\nimport Ratings from 'react-ratings-declarative';\n\nclass Foo extends Component {\n    changeRating( newRating ) {\n      this.setState({\n        rating: newRating\n      });\n    }\n\n    render() {\n      return (\n          \u003cRatings\n            rating={this.state.rating}\n            widgetRatedColors=\"blue\"\n            changeRating={this.changeRating}\n          \u003e\n            \u003cRatings.Widget /\u003e\n            \u003cRatings.Widget /\u003e\n            \u003cRatings.Widget\n              widgetDimension=\"60px\"\n              svgIconViewBox=\"0 0 5 5\"\n              svgIconPath=\"M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z\"\n            /\u003e\n            \u003cRatings.Widget widgetHoverColor=\"black\" /\u003e\n            \u003cRatings.Widget /\u003e\n          \u003c/Ratings\u003e\n      );\n    }\n}\n\n\nclass Bar extends Component {\n  render() {\n    return (\n      \u003cRatings\n        rating={3.403}\n        widgetDimensions=\"40px\"\n        widgetSpacings=\"15px\"\n      \u003e\n        \u003cRatings.Widget widgetRatedColor=\"green\" /\u003e\n        \u003cRatings.Widget widgetSpacing=\"30px\" widgetDimension=\"15px\" /\u003e\n        \u003cRatings.Widget widgetRatedColor=\"black\" /\u003e\n        \u003cRatings.Widget widgetRatedColor=\"rebeccapurple\" /\u003e\n        \u003cRatings.Widget /\u003e\n      \u003c/Ratings\u003e\n    );\n  }\n}\n```\n\n## API\n\n### Ratings\n\n| Prop | Type | Default | Description | Example |\n| ---- | ---- | ------- | ----------- | ------- |\n| rating | number | 0 | The user's rating. Number of widgets to highlight. | `3` |\n| typeOfWidget | string | 'Star' | The type of widget used as a rating meter | `Point` |\n| changeRating | function | ()=\u003e{} | Callback that will be passed the new rating a user selects | `const setNewRating = (rating) =\u003e this.props.dispatch( fooActions.setRating(rating) )` |\n| gradientPathName | string | '' | gradientPathname needed if app's path is not at the root | `/app/` |\n| ignoreInlineStyles | boolean | false | ignore all the inline styles and write your own css using the provided classes | `true` | \n| svgIconPaths | string | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' | Set a path that describes the svg shape for all the children | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' |\n| svgIconViewBoxes | string | '0 0 51 48' | Set the view box for a custom svg path you might have for all the children | '0 0 51 48' |\n| svgs | node | none | Use a custom svg or react element for all the children | `\u003csvg\u003e\u003ccircle /\u003e\u003c/svg\u003e` |\n| widgetRatedColors | string | 'rgb(109, 122, 130)' | Color of widgets that the user has rated, applied to all the children | `black` |\n| widgetEmptyColors | string | 'rgb(203, 211, 227)' | Color of widgets that the use hasn't rated, applied to all the children | `grey` |\n| widgetHoverColors | string | 'rgb(230, 67, 47)' | Color of widget when hovering over it in selection mode, applied to all the children | `yellow` |\n| widgetDimensions | string | '50px' | The width and height of the star, applied to all the children | `15px` |\n| widgetSpacings | string | '7px' | The spacing between the widgets, applied to all the children | `0` |\n\n### Widget\n\n| Prop | Type | Default | Description | Example |\n| ---- | ---- | ------- | ----------- | ------- |\n| svgIconPath | string | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' | Set a path that describes the svg shape | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' |\n| svgIconViewBox | string | '0 0 51 48' | Set the view box for a custom svg path you might have | '0 0 51 48' |\n| svg | node | none | Use a custom svg or react element | `\u003csvg\u003e\u003ccircle /\u003e\u003c/svg\u003e` |\n| widgetRatedColor | string | 'rgb(109, 122, 130)' | Color of widgets that the user has rated | `black` |\n| widgetEmptyColor | string | 'rgb(203, 211, 227)' | Color of widgets that the use hasn't rated | `grey` |\n| widgetHoverColor | string | 'rgb(230, 67, 47)' | Color of star when hovering over it in selection mode | `yellow` |\n| widgetDimension | string | '50px' | The width and height of the widget | `15px` |\n| widgetSpacing | string | '7px' | The spacing between the widgets | `0` |\n\n\n## Browser Support\n\nSupports Chrome, safari, firefox, edge, and ie 9+.\nThe widget is SVG, so this library fails for any browser that doesn't support svg.\n\n\n### Potential Gradient Path Name Issue\n\nI use the css property `fill: 'url(#starGrad\u003crandomNum\u003e)';` to fill in just a percentage of a star. It has some weird bugs depending on the pathname of the app. Normally SPA's have `window.location.pathname === '/'`, but if you append `window.location.origin` with the pathname of say `app`, so that `window.location.pathname === '/app/'`, then you need a gradientPathName of `'/app/'`.\n\nHere is a stackoverflow post that I found that was related to this issue: http://stackoverflow.com/questions/36774188/svg-internal-url-links-and-iframes-on-wirecloud\n\n## Contribute\n\nIf you want to contribute: Make changes in the src folder. And then run `make build`.\nThe `make build` command compiles react and es6 stuff using babel from `src/` into `build/`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekeric13%2Freact-ratings-declarative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fekeric13%2Freact-ratings-declarative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekeric13%2Freact-ratings-declarative/lists"}