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