\r\n\r\n## Features\r\n\r\n- Customizable design\r\n- Prize selection with props\r\n- Spinning animation (customizable spin duration)\r\n- **[NEW!]** Images as items (see [Types](#types))\r\n- **[NEW!]** Customizable pointer image\r\n- Multiple consecutive spins (see [Multi Spin](#multi-spin))\r\n- Compatible with TypeScript\r\n\r\n## Install\r\n\r\n $ npm install react-custom-roulette\r\n\r\nor\r\n\r\n $ yarn add react-custom-roulette\r\n\r\n## Quickstart\r\n\r\n#### Wheel Component\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { Wheel } from 'react-custom-roulette'\r\n\r\nconst data = [\r\n { option: '0', style: { backgroundColor: 'green', textColor: 'black' } },\r\n { option: '1', style: { backgroundColor: 'white' } },\r\n { option: '2' },\r\n]\r\n\r\nexport default () => (\r\n <>\r\n \r\n \r\n)\r\n```\r\n\r\n#### Props\r\n\r\n| **Prop** | **Type** | **Default** | **Description** |\r\n|---------------------------------|--------------------|---------------------------|--------------------------------------------------------------------|\r\n| mustStartSpinning _(required)_ | `boolean` | - | Sets when the roulette must start the spinning animation |\r\n| prizeNumber _(required)_ | `number` | - | Sets the winning option. It's value must be between 0 and data.lenght-1 |\r\n| data _(required)_ | `Array` | - | Array of options. Can contain styling information for a specific option (see [WheelData](#wheeldata)) |\r\n| onStopSpinning | `function` | () => null | Callback function that is called when the roulette ends the spinning animation |\r\n| backgroundColors | `Array` | ['darkgrey', 'lightgrey'] | Array of colors that will fill the background of the roulette options, starting from option 0 |\r\n| textColors | `Array` | ['black'] | Array of colors that will fill the text of the roulette options, starting from option 0 |\r\n| outerBorderColor | `string` | 'black' | Color of the roulette's outer border line |\r\n| outerBorderWidth | `number` | 5 | Width of the roulette's outer border line (0 represents no outer border line) |\r\n| innerRadius | `number [0..100]` | 0 | Distance of the inner radius from the center of the roulette |\r\n| innerBorderColor | `string` | 'black' | Color of the roulette's inner border line |\r\n| innerBorderWidth | `number` | 0 | Width of the roulette's inner border line (0 represents no inner border line) |\r\n| radiusLineColor | `string` | 'black' | Color of the radial lines that separate each option |\r\n| radiusLineWidth | `number` | 5 | Width of the radial lines that separate each option (0 represents no radial lines) |\r\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. |\r\n| fontSize | `number` | 20 | Global font size of the option string |\r\n| fontWeight | `number | string` | 'bold' | Global font weight of the option string |\r\n| fontStyle | `string` | 'normal' | Global font style of the option string |\r\n| perpendicularText | `boolean` | false | When 'true', sets the option texts perpendicular to the roulette's radial lines |\r\n| textDistance | `number [0..100]` | 60 | Distance of the option texts from the center of the roulette |\r\n| spinDuration | `number [0.01 ..]` | 1.0 | Coefficient to adjust the default spin duration |\r\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 |\r\n| pointerProps | `PointerProps` | { src: roulettePointer } | Image source and CSS styling to apply to the pointer image. |\r\n| disableInitialAnimation | `boolean` | false | When 'true', disables the initial backwards wheel animation |\r\n\r\n## Types\r\n\r\n#### WheelData\r\n\r\n```jsx\r\ninterface WheelData {\r\n option?: string;\r\n image?: ImageProps;\r\n style?: StyleType; // Optional\r\n optionSize?: number; // Optional\r\n}\r\n```\r\n\r\n| **Prop** | **Type** | **Default** | **Description** |\r\n|------------|--------------|-------------|-------------------------------------------------------------------------------------------------------|\r\n| option | `string` | '' | String to be rendered inside an option. |\r\n| image | `ImageProps` | - | Image to be rendered inside an option. It is configured through [ImageProps](#imageprops) |\r\n| style | `StyleType` | - | Styles for option. It is configured through [StyleType](#styletype) |\r\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. |\r\n\r\n#### StyleType\r\n\r\n```jsx\r\ninterface StyleType {\r\n backgroundColor?: string; // Optional\r\n textColor?: string; // Optional\r\n fontFamily?: string; // Optional\r\n fontSize?: number; // Optional\r\n fontWeight?: number | string; // Optional\r\n fontStyle?: string; // Optional\r\n}\r\n```\r\n\r\n| **Prop** | **Type** | **Default** | **Description** |\r\n|-----------------|-------------------|---------------------------|--------------------------------------------------------------------|\r\n| backgroundColor | `string` | 'darkgrey' or 'lightgrey' | Background color for option |\r\n| textColor | `string` | 'black' | Text color |\r\n| fontFamily | `string` | 'Helvetica, Arial' | String containing text font and its fallbacks separated by commas |\r\n| fontSize | `number` | 20 | Font size number |\r\n| fontWeight | `number | string` | 'bold' | Font weight string or number |\r\n| fontStyle | `string` | 'normal' | Font style string |\r\n\r\n#### ImageProps\r\n\r\n```jsx\r\ninterface ImageProps {\r\n uri: string;\r\n offsetX?: number; // Optional\r\n offsetY?: number; // Optional\r\n sizeMultiplier?: number; // Optional\r\n landscape?: boolean; // Optional\r\n}\r\n```\r\n\r\n| **Prop** | **Type** | **Default** | **Description** |\r\n|----------------|-----------|-------------|---------------------------------------------------------------------------------------|\r\n| uri | `string` | - | Image source. It can be url or path. |\r\n| offsetX | `number` | 0 | Image offset in its X axis |\r\n| offsetY | `number` | 0 | Image offset in its Y axis |\r\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. |\r\n| landscape | `boolean` | false | If true, image will be rotated 90 degrees so as to render in a landscape orientation. |\r\n\r\n#### PointerProps\r\n\r\n```jsx\r\ninterface PointerProps {\r\n src?: string; // Optional\r\n style?: React.CSSProperties; // Optional\r\n}\r\n```\r\n\r\n| **Prop** | **Type** | **Default** | **Description** |\r\n|----------|-----------------------|---------------------------|-----------------------------|\r\n| src | `string` | - | Image src. |\r\n| style | `React.CSSProperties` | - | Styling for pointer image. |\r\n\r\n## Multi Spin\r\n\r\n#### Example (using useState)\r\n\r\n```jsx\r\nimport React, { useState } from 'react'\r\nimport { Wheel } from 'react-custom-roulette'\r\n\r\nconst data = [\r\n { option: '0' },\r\n { option: '1' },\r\n { option: '2' },\r\n]\r\n\r\nexport default () => {\r\n const [mustSpin, setMustSpin] = useState(false);\r\n const [prizeNumber, setPrizeNumber] = useState(0);\r\n\r\n const handleSpinClick = () => {\r\n if (!mustSpin) {\r\n const newPrizeNumber = Math.floor(Math.random() * data.length);\r\n setPrizeNumber(newPrizeNumber);\r\n setMustSpin(true);\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {\r\n setMustSpin(false);\r\n }}\r\n />\r\n \r\n \r\n )\r\n}\r\n```\r\n\r\n## Contributors\r\n\r\nThis project exists thanks to all the people who contribute!\r\n\r\n
\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT license, Copyright (c) 2023 Effectus Software. [[License](LICENSE)]\r\n","readmeFilename":"README.md"}