{"id":25001431,"url":"https://github.com/ubcent/react-circular-color","last_synced_at":"2026-04-02T02:07:27.645Z","repository":{"id":24105253,"uuid":"100603843","full_name":"ubcent/react-circular-color","owner":"ubcent","description":"A circular color picker component also named color-wheel performed with react and pure svg","archived":false,"fork":false,"pushed_at":"2022-07-07T13:05:04.000Z","size":666,"stargazers_count":33,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-11-27T09:45:17.605Z","etag":null,"topics":["javascript-library","react","react-component","react-components","reactjs","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ubcent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-17T12:59:31.000Z","updated_at":"2025-10-19T09:14:35.000Z","dependencies_parsed_at":"2022-08-20T11:50:09.699Z","dependency_job_id":null,"html_url":"https://github.com/ubcent/react-circular-color","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ubcent/react-circular-color","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubcent%2Freact-circular-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubcent%2Freact-circular-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubcent%2Freact-circular-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubcent%2Freact-circular-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ubcent","download_url":"https://codeload.github.com/ubcent/react-circular-color/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubcent%2Freact-circular-color/sbom","scorecard":{"id":906144,"data":{"date":"2025-08-11","repo":{"name":"github.com/ubcent/react-circular-color","commit":"f6447f2976106f129b8f4e48c4ec579ec8aa42da"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.3,"checks":[{"name":"Code-Review","score":2,"reason":"Found 7/26 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-24T17:25:05.318Z","repository_id":24105253,"created_at":"2025-08-24T17:25:05.319Z","updated_at":"2025-08-24T17:25:05.319Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31294398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T01:43:37.129Z","status":"online","status_checked_at":"2026-04-02T02:00:08.535Z","response_time":89,"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":["javascript-library","react","react-component","react-components","reactjs","svg"],"created_at":"2025-02-04T20:35:00.268Z","updated_at":"2026-04-02T02:07:27.624Z","avatar_url":"https://github.com/ubcent.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Circular Color picker [![npm](https://img.shields.io/npm/dt/react-circular-color.svg)](https://www.npmjs.com/package/react-circular-color)\n\n\nA circular color picker component also named color-wheel performed with react and pure svg. Mobile compatible.\n\n![circular color picker](/assets/wheel.png) ![circular color picker](/assets/wheel32.PNG)\n\n# Installation\n\n```bash\nnpm install react-circular-color\n```\n\n# Usage\n\n```javascript\nimport React, { Component } from 'react';\n\nimport CircularColor from 'react-circular-color';\n\n\nclass ExampleComponent extends Component {\n  handleColorChange(color) {\n    console.log(color); // it will be string with a color hash e.g. #1c1c1c\n  }\n\n  render() {\n    return (\n      \u003cCircularColor size={200} onChange={this.handleColorChange} /\u003e\n    );\n  }\n}\n```\n\n# Customized elements\n\n```javascript\n\nimport React, { Component } from 'react';\nimport ColorPicker from 'react-color-picker';\n\nexport default class CustomizedColorPicker extends Component {\n\n    renderHandle = ({ onHandleDown, cx, cy, handleRadius }) =\u003e {\n        return(\n            \u003csvg x={cx-10} y={cy-10} width={20} height={20} \u003e \n            \u003cpolygon points={'10,0 0,20 20,20'} fill=\"#fff\" /\u003e\n            \u003c/svg\u003e\n        );\n    }\n\n    renderRect = ({ color, x, y }) =\u003e {\n        return (\n            \u003ccircle\n                cx={x + 14}\n                cy={y + 14}\n                r=\"14\"\n                fill={color}\n            /\u003e\n        );\n    }\n\n    render() {\n        return (\n            \u003cColorPicker\n                renderRect={this.renderRect}\n                centerRect={true}\n                renderHandle={this.renderHandle}                \n            /\u003e\n        );\n    }\n}\n\n```\n\n\n# Props\n\n| Name | Description |\n| ---- | ----------- |\n| `size` | Numeric size of the element in pixels. Default: `200` |\n| `numberOfSectors` | Number of wheel's sectors. Default: `360` |\n| `className` | Classes to apply to the svg element |\n| `centerRect` | Whether to display central rectangle with picked color. Default: `false`. |\n| `onChange` | Fired when the color is changing |\n| `renderRect` | Use it to customize how the central rectangle with picked color is rendered. Function recieves one object with `color`, `x` \u0026 `y` keys |\n| `renderHandle` | Use it to customize how the circular color handle is rendered. Function recieves one object with `cx`, `cy`, `onHandleDown` \u0026 `handleRadius` keys |\n| `color` | String value of color. Default:`#f2ff00` |\n\n# Development\n\nTo run demo locally on localhost:8080:\n\n```bash\nnpm install\nnpm start\n```\n\n# Test\n\nTo run test type:\n\n```bash\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubcent%2Freact-circular-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fubcent%2Freact-circular-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubcent%2Freact-circular-color/lists"}