{"id":14483539,"url":"https://github.com/effectussoftware/react-custom-roulette","last_synced_at":"2025-10-01T13:11:17.279Z","repository":{"id":38425389,"uuid":"265386282","full_name":"effectussoftware/react-custom-roulette","owner":"effectussoftware","description":"Repository for the react-custom-roulette library","archived":false,"fork":false,"pushed_at":"2024-05-29T10:33:05.000Z","size":39993,"stargazers_count":347,"open_issues_count":30,"forks_count":140,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-09T07:35:14.291Z","etag":null,"topics":["react","reactjs","typescript"],"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/effectussoftware.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-19T22:50:12.000Z","updated_at":"2025-08-05T20:21:20.000Z","dependencies_parsed_at":"2024-06-18T16:26:05.413Z","dependency_job_id":null,"html_url":"https://github.com/effectussoftware/react-custom-roulette","commit_stats":{"total_commits":63,"total_committers":7,"mean_commits":9.0,"dds":0.4920634920634921,"last_synced_commit":"15caca39860c9fa998f84d310aae40117ba7d32c"},"previous_names":["effectussoftware/wheel-of-fortune"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/effectussoftware/react-custom-roulette","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effectussoftware%2Freact-custom-roulette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effectussoftware%2Freact-custom-roulette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effectussoftware%2Freact-custom-roulette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effectussoftware%2Freact-custom-roulette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/effectussoftware","download_url":"https://codeload.github.com/effectussoftware/react-custom-roulette/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effectussoftware%2Freact-custom-roulette/sbom","scorecard":{"id":368272,"data":{"date":"2025-08-11","repo":{"name":"github.com/effectussoftware/react-custom-roulette","commit":"0049461cb3bf89a754d9c40e167518b6996cf732"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"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":"Code-Review","score":3,"reason":"Found 3/10 approved changesets -- score normalized to 3","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":"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":"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":"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":"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":"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":"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 29 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"}},{"name":"Vulnerabilities","score":0,"reason":"82 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h","Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T12:22:41.018Z","repository_id":38425389,"created_at":"2025-08-18T12:22:41.018Z","updated_at":"2025-08-18T12:22:41.018Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272805344,"owners_count":24995909,"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-30T02:00:09.474Z","response_time":77,"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":["react","reactjs","typescript"],"created_at":"2024-09-03T00:01:50.914Z","updated_at":"2025-10-01T13:11:17.154Z","avatar_url":"https://github.com/effectussoftware.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Custom Roulette\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![npm version](https://img.shields.io/npm/v/react-custom-roulette)](https://www.npmjs.com/package/react-custom-roulette)\n  [![Types](https://img.shields.io/npm/types/react-custom-roulette)](https://www.typescriptlang.org/index.html)\n  [![npm downloads](https://img.shields.io/npm/dm/react-custom-roulette)](https://www.npmjs.com/package/react-custom-roulette)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003eCustomizable React roulette wheel with spinning animation\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  ![React Custom Roulette](https://github.com/effectussoftware/react-custom-roulette/raw/master/demo/roulette-demo.gif)\n\n\u003c/div\u003e\n\n## Features\n\n- Customizable design\n- Prize selection with props\n- Spinning animation (customizable spin duration)\n- **[NEW!]** Images as items (see [Types](#types))\n- **[NEW!]** Customizable pointer image\n- Multiple consecutive spins (see [Multi Spin](#multi-spin))\n- Compatible with TypeScript\n\n## Install\n\n    $ npm install react-custom-roulette\n\nor\n\n    $ yarn add react-custom-roulette\n\n## Quickstart\n\n#### Wheel Component\n\n```jsx\nimport React from 'react'\nimport { Wheel } from 'react-custom-roulette'\n\nconst data = [\n  { option: '0', style: { backgroundColor: 'green', textColor: 'black' } },\n  { option: '1', style: { backgroundColor: 'white' } },\n  { option: '2' },\n]\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cWheel\n      mustStartSpinning={mustSpin}\n      prizeNumber={3}\n      data={data}\n      backgroundColors={['#3e3e3e', '#df3428']}\n      textColors={['#ffffff']}\n    /\u003e\n  \u003c/\u003e\n)\n```\n\n#### Props\n\n| **Prop**                        | **Type**           | **Default**               | **Description**                                                    |\n|---------------------------------|--------------------|---------------------------|--------------------------------------------------------------------|\n| mustStartSpinning _(required)_  | `boolean`          | -                         | Sets when the roulette must start the spinning animation                                              |\n| prizeNumber _(required)_        | `number`           | -                         | Sets the winning option. It's value must be between 0 and data.lenght-1                                               |\n| data _(required)_               | `Array\u003cWheelData\u003e` | -                         | Array of options. Can contain styling information for a specific option (see [WheelData](#wheeldata))                          |\n| onStopSpinning                  | `function`         | () =\u003e null                | Callback function that is called when the roulette ends the spinning animation                                              |\n| backgroundColors                | `Array\u003cstring\u003e`    | ['darkgrey', 'lightgrey'] | Array of colors that will fill the background of the roulette options, starting from option 0                                 |\n| textColors                      | `Array\u003cstring\u003e`    | ['black']                 | Array of colors that will fill the text of the roulette options, starting from option 0                                 |\n| outerBorderColor                | `string`           | 'black'                   | Color of the roulette's outer border line                                                   |\n| outerBorderWidth                | `number`           | 5                         | Width of the roulette's outer border line (0 represents no outer border line)                                                  |\n| innerRadius                     | `number [0..100]`  | 0                         | Distance of the inner radius from the center of the roulette                                               |\n| innerBorderColor                | `string`           | 'black'                   | Color of the roulette's inner border line                                                   |\n| innerBorderWidth                | `number`           | 0                         | Width of the roulette's inner border line (0 represents no inner border line)                                                  |\n| radiusLineColor                 | `string`           | 'black'                   | Color of the radial lines that separate each option                                                 |\n| radiusLineWidth                 | `number`           | 5                         | Width of the radial lines that separate each option (0 represents no radial lines)                                          |\n| fontFamily                      | `string`           | 'Helvetica, Arial'        | Global font family of the option string. Non-Web safe fonts are fetched from https://fonts.google.com/. All available fonts can be found there.            |\n| fontSize                        | `number`           | 20                        | Global font size of the option string                            |\n| fontWeight                      | `number | string`  | 'bold'                    | Global font weight of the option string                          |\n| fontStyle                       | `string`           | 'normal'                  | Global font style of the option string                           |\n| perpendicularText               | `boolean`          | false                     | When 'true', sets the option texts perpendicular to the roulette's radial lines                                           |\n| textDistance                    | `number [0..100]`  | 60                        | Distance of the option texts from the center of the roulette     |\n| spinDuration                    | `number [0.01 ..]` | 1.0                       | Coefficient to adjust the default spin duration                  |\n| startingOptionIndex             | `number`           | -                         | Set which option (through its index in the `data` array) will be initially selected by the roulette (before spinning). If not specified the roulette will render without choosing a starting option                    |\n| pointerProps                    | `PointerProps`     | { src: roulettePointer }  | Image source and CSS styling to apply to the pointer image.                                                 |\n| disableInitialAnimation         | `boolean`          | false                     | When 'true', disables the initial backwards wheel animation      |\n\n## Types\n\n#### WheelData\n\n```jsx\ninterface WheelData {\n  option?: string;\n  image?: ImageProps;\n  style?: StyleType; // Optional\n  optionSize?: number; // Optional\n}\n```\n\n| **Prop**   | **Type**     | **Default** | **Description**                                                                                       |\n|------------|--------------|-------------|-------------------------------------------------------------------------------------------------------|\n| option     | `string`     | ''          | String to be rendered inside an option.                                                               |\n| image      | `ImageProps` | -           | Image to be rendered inside an option. It is configured through [ImageProps](#imageprops)             |\n| style      | `StyleType`  | -           | Styles for option. It is configured through [StyleType](#styletype)                                   |\n| optionSize | `number`     | 1           | Integer that sets the size of the option measured in roulette pieces. For example: if `data` provides 2 options A and B, and you set A's `optionSize` to `2`, B's `optionSize` to `1`, the roulette will render `3` pieces: 2 corresponding to A and 1 corresponding to B. Therefore, A will appear to be twice as big as B. |\n\n#### StyleType\n\n```jsx\ninterface StyleType {\n  backgroundColor?: string; // Optional\n  textColor?: string; // Optional\n  fontFamily?: string; // Optional\n  fontSize?: number; // Optional\n  fontWeight?: number | string; // Optional\n  fontStyle?: string; // Optional\n}\n```\n\n| **Prop**        | **Type**          | **Default**               | **Description**                                                    |\n|-----------------|-------------------|---------------------------|--------------------------------------------------------------------|\n| backgroundColor | `string`          | 'darkgrey' or 'lightgrey' | Background color for option                                        |\n| textColor       | `string`          | 'black'                   | Text color                                                         |\n| fontFamily      | `string`          | 'Helvetica, Arial'        | String containing text font and its fallbacks separated by commas  |\n| fontSize        | `number`          | 20                        | Font size number                                                   |\n| fontWeight      | `number | string` | 'bold'                    | Font weight string or number                                       |\n| fontStyle       | `string`          | 'normal'                  | Font style string                                                  |\n\n#### ImageProps\n\n```jsx\ninterface ImageProps {\n  uri: string;\n  offsetX?: number; // Optional\n  offsetY?: number; // Optional\n  sizeMultiplier?: number; // Optional\n  landscape?: boolean; // Optional\n}\n```\n\n| **Prop**       | **Type**  | **Default** | **Description**                                                                       |\n|----------------|-----------|-------------|---------------------------------------------------------------------------------------|\n| uri            | `string`  | -           | Image source. It can be url or path.                                                  |\n| offsetX        | `number`  | 0           | Image offset in its X axis                                                            |\n| offsetY        | `number`  | 0           | Image offset in its Y axis                                                            |\n| sizeMultiplier | `number`  | 1           | A value of 1 means image height is calculated as `200px * sizeMultiplier` and width will be calculated to keep aspect ratio. |\n| landscape      | `boolean` | false       | If true, image will be rotated 90 degrees so as to render in a landscape orientation. |\n\n#### PointerProps\n\n```jsx\ninterface PointerProps {\n  src?: string; // Optional\n  style?: React.CSSProperties; // Optional\n}\n```\n\n| **Prop** | **Type**              | **Default**               | **Description**             |\n|----------|-----------------------|---------------------------|-----------------------------|\n| src      | `string`              | -                         | Image src.                  |\n| style    | `React.CSSProperties` | -                         | Styling for pointer image.  |\n\n## Multi Spin\n\n#### Example (using useState)\n\n```jsx\nimport React, { useState } from 'react'\nimport { Wheel } from 'react-custom-roulette'\n\nconst data = [\n  { option: '0' },\n  { option: '1' },\n  { option: '2' },\n]\n\nexport default () =\u003e {\n  const [mustSpin, setMustSpin] = useState(false);\n  const [prizeNumber, setPrizeNumber] = useState(0);\n\n  const handleSpinClick = () =\u003e {\n    if (!mustSpin) {\n      const newPrizeNumber = Math.floor(Math.random() * data.length);\n      setPrizeNumber(newPrizeNumber);\n      setMustSpin(true);\n    }\n  }\n\n  return (\n    \u003c\u003e\n      \u003cWheel\n        mustStartSpinning={mustSpin}\n        prizeNumber={prizeNumber}\n        data={data}\n\n        onStopSpinning={() =\u003e {\n          setMustSpin(false);\n        }}\n      /\u003e\n      \u003cbutton onClick={handleSpinClick}\u003eSPIN\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## Contributors\n\nThis project exists thanks to all the people who contribute!\n\n\u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/luchozamora1\"\u003eLuis Felipe Zamora\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/nazabalm20\"\u003eMartin Nazabal\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/jpmazza\"\u003eJP Mazza\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/TakeshiOnishi\"\u003eTakeshiOnishi\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/Gaston-Gonzalez\"\u003eGastón González\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/jpmartinezeff\"\u003eJuan Pablo Martinez\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/Acarvajal904\"\u003eAndres Carvajal\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n## License\n\nThis project is licensed under the MIT license, Copyright (c) 2023 \u003ca href=\"https://effectussoftware.com\"\u003eEffectus Software\u003c/a\u003e. [[License](LICENSE)]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffectussoftware%2Freact-custom-roulette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feffectussoftware%2Freact-custom-roulette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffectussoftware%2Freact-custom-roulette/lists"}