{"id":15288379,"url":"https://github.com/ernanej/svelte-star-rating","last_synced_at":"2025-10-28T16:31:18.427Z","repository":{"id":57682157,"uuid":"481419095","full_name":"ErnaneJ/svelte-star-rating","owner":"ErnaneJ","description":"Simple Svelte component, with no dependencies, for implementing and capturing assessments through a simple and intuitive interface that will take you to the stars. ✨ ","archived":false,"fork":false,"pushed_at":"2024-08-10T13:05:51.000Z","size":2708,"stargazers_count":36,"open_issues_count":1,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T15:13:10.951Z","etag":null,"topics":["component","package","rating","rating-stars","sapper","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@ernane/svelte-star-rating","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ErnaneJ.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ernanej"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-04-14T00:50:56.000Z","updated_at":"2025-02-11T15:04:03.000Z","dependencies_parsed_at":"2023-12-19T02:48:06.157Z","dependency_job_id":"f3dc545d-ab77-4a66-96d1-c6d2eb747061","html_url":"https://github.com/ErnaneJ/svelte-star-rating","commit_stats":{"total_commits":21,"total_committers":5,"mean_commits":4.2,"dds":"0.23809523809523814","last_synced_commit":"2c3458d56e9ddcd86abbca9533c2808ea3809a51"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErnaneJ%2Fsvelte-star-rating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErnaneJ%2Fsvelte-star-rating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErnaneJ%2Fsvelte-star-rating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErnaneJ%2Fsvelte-star-rating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ErnaneJ","download_url":"https://codeload.github.com/ErnaneJ/svelte-star-rating/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238677021,"owners_count":19511928,"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":["component","package","rating","rating-stars","sapper","svelte"],"created_at":"2024-09-30T15:48:37.539Z","updated_at":"2025-10-28T16:31:13.072Z","avatar_url":"https://github.com/ErnaneJ.png","language":"Svelte","funding_links":["https://github.com/sponsors/ernanej"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n   ✨ Svelte Star Rating ✨\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"#-Project\"\u003eProject\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-Installation\"\u003eInstallation\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-Features\"\u003eFeatures\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#-Use\"\u003eUse\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cp align=\"center\"\u003e\n  \u003cimg alt=\"preview star rating\" src=\"https://raw.githubusercontent.com/ErnaneJ/svelte-star-rating/master/.github/preview.png\" width=\"50%\"\u003e\n\u003c/p\u003e\n\n## 💻 Project\n\nSimple Svelte component, with no dependencies, for implementing and capturing assessments through a simple and intuitive interface that will take you to the stars.\n\n[See this demo!! ](https://svelte.dev/repl/672b083a2ce346a6aae6f07d9e3787f4?version=3.47.0)\n\n## 📦 Installation\n\n  ```bash\n  $ npm install @ernane/svelte-star-rating # =\u003e or yarn\n  ```\n\n⚠️ if using [SvelteKit](https://kit.svelte.dev/) or [Sapper](https://sapper.svelte.dev/), it is advised to install as a development dependency:\n\n  ```bash\n  $ npm install @ernane/svelte-star-rating --save-dev # =\u003e or yarn\n  ```\n\n### 📁 Features\n\nThis package will add a svelte component that may or may not receive a configuration object with the following attributes shown below.\n\n- ⚙️ General Settings\n\n| Attribute  |   Data Type  | Required    |    Default   |\n|:----------:|:------------:|:-----------:|:------------:|\n| readOnly   |   `bool`     |    false    |     false    |\n| countStars |   `integer`  |    false    |     5        |\n| score      |   `float`    |    false    |     0.0      |\n| showScore  |   `bool`     |    false    |     true     |\n| scoreFormat|   `function` |    false    |    precent   |\n| name       |   `String`   |    false    |     \"\"     | \n\n\nIn addition, we have two other nested attributes that specify distinct settings.\n\n- 📏 Range\n  \n| Attribute  |   Data Type  | Required  |    Default   |\n|:----------:|:------------:|:---------:|:------------:|\n|     min    |   `integer`  |    false    |      0       |\n|     max    |   `integer`  |    false    |      5       |\n|    step    |    `float`   |    false    |    0.001     |\n\n- ⭐ Setting of the Stars:\n\n|      Attribute      |   Data Type  |  Required   |    Default   |\n|:-------------------:|:------------:|:-----------:|:------------:|\n| size                |   `integer`  |    false    |      30      |\n| fillColor           |   `String`   |    false    |    #F9ED4F   |\n| strokeColor         |   `String`   |    false    |    #BB8511   | \n| unfilledColor       |   `String`   |    false    |     #FFF     | \n| strokeUnfilledColor |   `String`   |    false    |     #000     | \n\nIn the end, the configuration object will be similar to the one shown below.\n\n```js\nconst config = {\n  readOnly: false,\n  countStars: 5,\n  range: {\n    min: 0, \n    max: 5, \n    step: 0.001\n  },\n  score: 0.0,\n  showScore: true,\n  scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },\n  name: \"\",\n  starConfig: {\n    size: 30,\n    fillColor: '#F9ED4F',\n    strokeColor: \"#BB8511\",\n    unfilledColor: '#FFF',\n    strokeUnfilledColor: '#000'\n  }\n}\n```\n\n- 🎯 Events\n\nIn addition, it is also possible to observe events of the component itself that will be executed in an internal element from a defined action. Below are the available events.\n\n|         Type        |       Target      |  Required   |    Default   |\n|:-------------------:|:-----------------:|:-----------:|:------------:|\n|       change        |   `input.slider`  |    false    |      null    |\n\n## 💡 Use\n\n- Import the component\n\n  ```js\n  import StarRating from \"@ernane/svelte-star-rating\";\n  ```\n\n- Create the configuration object\n\n  ```js\n  const config = { ... }\n  ```\n  \u003csmall\u003e**As shown in the previous section\u003c/small\u003e\n\n- Finally, use it! 🎉\n\n  ```js\n  \u003cStarRating {config}/\u003e\n  ```\n\n_If you would like to implement or improve any feature feel free to submit a pull request. I would love to receive!_\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  Developed with ❤ by \u003ca target=\"_blank\" href=\"https://links.ernane.dev/\"\u003eErnane Ferreira\u003c/a\u003e. 👋🏻\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernanej%2Fsvelte-star-rating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fernanej%2Fsvelte-star-rating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernanej%2Fsvelte-star-rating/lists"}