{"id":25535963,"url":"https://github.com/teddy95/starry","last_synced_at":"2025-04-11T14:34:15.965Z","repository":{"id":17672255,"uuid":"20477004","full_name":"Teddy95/Starry","owner":"Teddy95","description":"JavaScript star rating system 🌟🌃💖","archived":false,"fork":false,"pushed_at":"2020-07-26T12:11:13.000Z","size":37284,"stargazers_count":18,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T05:10:53.255Z","etag":null,"topics":["cookie","css","icons","javascript","js","npm","rating","star","star-rating","starrating","starry"],"latest_commit_sha":null,"homepage":"https://teddy95.github.io/Starry","language":"JavaScript","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/Teddy95.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-04T09:11:51.000Z","updated_at":"2023-09-29T18:52:53.000Z","dependencies_parsed_at":"2022-08-04T20:30:24.153Z","dependency_job_id":null,"html_url":"https://github.com/Teddy95/Starry","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2FStarry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2FStarry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2FStarry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Teddy95%2FStarry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Teddy95","download_url":"https://codeload.github.com/Teddy95/Starry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248419816,"owners_count":21100254,"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":["cookie","css","icons","javascript","js","npm","rating","star","star-rating","starrating","starry"],"created_at":"2025-02-20T04:24:35.241Z","updated_at":"2025-04-11T14:34:15.946Z","avatar_url":"https://github.com/Teddy95.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Starry 🌟🌃💖\n\n![Screenshot](docs/assets/screenshot.png)\n\n[Starry Documentation](https://teddy95.github.io/Starry)\n\n## Installation\n\nInclude Starry scripts and stylesheets in your html DOM:\n\n```html\n\u003c!-- Local file --\u003e\n\u003clink href=\"./dist/starry.min.css\" type=\"text/css\" rel=\"stylesheet\" /\u003e\n\n\u003c!-- CDN --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/gh/teddy95/starry@5/dist/starry.min.css\" type=\"text/css\" rel=\"stylesheet\" /\u003e\n```\n\n```html\n\u003c!-- Local file --\u003e\n\u003cscript src=\"./dist/starry.min.js\" type=\"text/javascript\" language=\"javascript\"\u003e\u003c/script\u003e\n\n\u003c!-- CDN --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/teddy95/starry@5/dist/starry.min.js\" type=\"text/javascript\" language=\"javascript\"\u003e\u003c/script\u003e\n```\n\nOr install Starry as a Node dependency:\n\n```bash\n$ npm install starry-rating\n```\n\n```javascript\nimport Starry from 'starry-rating'\n\n// or with require...\nconst Starry = require('starry-rating')\n```\n\n## How to use\n\n### HTML markup\n\n```html\n\u003c!-- Use a simple div container which is selectable by id or class --\u003e\n\u003cdiv id=\"star-rating\"\u003e\u003c/div\u003e\n```\n\n### JavaScript API\n\n```javascript\nvar starRatingEl = document.getElementById('star-rating');\nvar starRating = new Starry(starRatingEl);\n```\n\n#### More complex example\n\nMore complex example of a star rating with tooltips and custom icons, which is logging the rating to console. Tooltips have to be rendered in ```onRender()``` method by any tooltip library. In this example we use Bootstrap tooltips with jQuery \u0026 Popper.js.\n\n```javascript\nvar starRatingId = 'ExampleRating'; // Html DOM id + star rating element name\nvar starRatingEl = document.getElementById(starRatingId);\nvar starRating = new Starry(starRatingEl, {\n\tname: starRatingId, // Use a name to determine tooltips for only this Starry element\n\tlabels: [\n\t\t'Low',\n\t\t'Nice to have',\n\t\t'Very nice',\n\t\t'Perfect',\n\t\t'Excellent'\n\t],\n\tonClear: function () {\n\t\t$('[data-name=\"' + starRatingId + '\"] [data-tooltip]').tooltip('dispose');\n\t},\n\tonRender: function () {\n\t\t$('[data-name=\"' + starRatingId + '\"] [data-tooltip]').tooltip({\n\t\t\ttrigger: 'hover',\n\t\t\tplacement: 'top'\n\t\t});\n\t},\n\tonRate: function (rating) {\n\t\tconsole.log(rating)\n\t},\n\ticons: {\n\t\t// File path, uri or base64 string for `src` attribute\n\t\tblank: './dist/icons/blank.svg',\n\t\thover: './dist/icons/hover.svg',\n\t\tactive: './dist/icons/active.svg'\n\t}\n});\n```\n\n#### Options\n\n| Option              | Type            | Default                              | Description                                                                                            |\n| ------------------- | --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------ |\n| name                | String          |                                      | Name of star rating element. This option is required, if multi rating is disabled.                     |\n| stars               | Integer         | `5`                                  | Number of rating stars.                                                                                |\n| multiRating         | Boolean         | `true`                               | Determines whether the user can submit several ratings.                                                |\n| beginWith           | Float           | `0`                                  | Preloaded rating in percentage.                                                                        |\n| readOnly            | Boolean         | `false`                              | Read only rating stars.                                                                                |\n| staticActiveRating  | Boolean         | `true`                               | Show current rating while hovering over rating stars.                                                  |\n| setStarsAfterRating | Boolean         | `true`                               | Update rating stars after rating to new value.                                                         |\n| labels              | Array / Boolean | `false`                              | Labels / tooltips for the stars.                                                                       |\n| onRate              | Function        | `(rating) =\u003e true`                   | Called on rating event.                                                                                |\n| onClear             | Function        | `undefined`                          | Called each time when Starry is being destroyed or rebuilt.                                            |\n| onRender            | Function        | `undefined`                          | Called each time when Starry is build / rendered in html DOM.                                          |\n| icons               | Object          | Default [Starry icons](/dist/icons). | Icon images. Object with properties `blank` (![blank](/dist/icons/blank.png)), `active` (![blank](/dist/icons/active.png)) and `hover` (![blank](/dist/icons/hover.png)). Use a string for each image source. |\n\n#### Methods\n\n##### Get current rating `getCurrentRating()`\n\n```javascript\nconsole.log(starRating.getCurrentRating())\n```\n\n##### Destroy Starry `clear()`\n\n```javascript\nstarRating.clear()\n```\n\n##### Update Starry with new configurations `update(config)`\n\nStarry will merge the new configurations into the old ones.\n\n```javascript\nstarRating.update({\n\treadOnly: true,\n\tbeginWith: 50\n})\n```\n\n##### Attach event listener `on(eventName, callbackFunction)`\n\nAttach an event listener to the star rating.\n\n```javascript\nstarRating.on('rate', function (rating) {\n\tconsole.log('Rating: ' + rating)\n})\n```\n\n#### Events\n\n| Name   | Arguments | Description          |\n| ------ | --------- | -------------------- |\n| rate   | `rating`  | Fired on rating.     |\n| render |           | Fired on rendering.  |\n| clear  |           | Fired on destroying. |\n\n## Cookies\n\nStarry use [cookies](http://en.wikipedia.org/wiki/HTTP_cookie), to save ratings! 🍪\n\n## License\n\nThe MIT License (MIT) - [View LICENSE.md](LICENSE.md)\n\n## Resources\n\n- [Starry v3.1.3 Documentation](https://teddy95.github.io/Starry/v3.1.3)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteddy95%2Fstarry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteddy95%2Fstarry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteddy95%2Fstarry/lists"}