Customizable React roulette wheel with spinning animation
- Customizable design
- Prize selection by props
- Spinning animation
- [NEW!] Multiple spins (see Multi Spin)
- Compatible with TypeScript
$ npm install react-custom-roulette
or
$ yarn add react-custom-roulette
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']}
/>
</>
)
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) |
fontSize | number |
20 | Font size 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 |
interface WheelData {
option: string;
style?: StyleType; // Optional
}
interface StyleType {
backgroundColor?: string; // Optional
textColor?: string; // Optional
}
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 = () => {
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>
</>
)
}
This project exists thanks to all the people who contribute!
This project is licensed under the MIT license, Copyright (c) 2020 Effectus Software. [License]