\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 () => (\n <>\n \n \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` | - | Array of options. Can contain styling information for a specific option (see [WheelData](#wheeldata)) |\n| onStopSpinning | `function` | () => null | Callback function that is called when the roulette ends the spinning animation |\n| backgroundColors | `Array` | ['darkgrey', 'lightgrey'] | Array of colors that will fill the background of the roulette options, starting from option 0 |\n| textColors | `Array` | ['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 () => {\n const [mustSpin, setMustSpin] = useState(false);\n const [prizeNumber, setPrizeNumber] = useState(0);\n\n const handleSpinClick = () => {\n if (!mustSpin) {\n const newPrizeNumber = Math.floor(Math.random() * data.length);\n setPrizeNumber(newPrizeNumber);\n setMustSpin(true);\n }\n }\n\n return (\n <>\n {\n setMustSpin(false);\n }}\n />\n \n \n )\n}\n```\n\n## Contributors\n\nThis project exists thanks to all the people who contribute!\n\n
\n\n## License\n\nThis project is licensed under the MIT license, Copyright (c) 2023 Effectus Software. [[License](LICENSE)]\n","readmeFilename":"README.md"}