#react-luckydraw
![](https://camo.githubusercontent.com/28436e7dd6476e2d976ca4f7db1601a5c848c733943c625f6641b7d54dc348be/68747470733a2f2f7472617669732d63692e6f72672f47656d65727a2f72656163742d6c75636b79647261772e7376673f6272616e63683d6d6173746572)
$ npm install --save react-luckydraw
import React from 'react';
import LuckyDraw from 'react-luckydraw';
// include styles
import 'react-luckydraw/lib/LuckyDraw.css';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<LuckyDraw
width={500}
height={350}
wheelSize={1000}
range={10}
innerRadius={250}
outerRadius={500}
showInnerLabels
drawLimitSwitch
drawLimit={5}
fontColor={'#000'}
fontSize={'20px'}
writingModel={'tb'}
drawButtonLabel={'start'}
textArray={[
'Love you x1', 'Love you x2', 'Love you x3', 'Love you x4', 'Love you x5', 'Love you x6', 'Love you x7', 'Love you x8', 'Love you x9', 'Love you x10',
]}
onSuccessDrawReturn={(drawNumber) => {
console.log(drawNumber)
}}
onOutLimitAlert={(limit) => {
if (limit) {
window.alert('out of limits')
}
}}
/>
</div>
)
}
}
Property |
Type |
Default |
Description |
width |
number |
500 |
width of luckydraw |
height |
number |
350 |
height of luckydraw |
wheelSize |
number |
width * 2 |
size of luckydraw Wheel |
range |
number |
30 |
range of luckydraw |
outerRadius |
number |
wheelSize/2 |
outerRadius of luckydraw Wheel |
innerRadius |
number |
outerRadius/2 |
innerRadius of luckydraw Wheel |
turns |
number |
3 |
Defines how many revolutions to rotate |
rotateSecond |
number |
5 |
Define how many seconds to turn around |
showInnerLabels |
boolean |
true |
show Labels on luckydraw Wheel |
drawLimitSwitch |
boolean |
true |
a switch of drawing wheel limit |
drawLimit |
number |
5 |
a limit for drawing times with wheel |
fontColor |
string |
'black' |
set color for label on wheel |
fontSize |
string |
'18px' |
set size for label on wheel |
drawButtonLabel |
string |
'start' |
set text for drawing button |
textArray |
array |
- |
set text array for wheel label |
onSuccessDrawReturn |
function |
- |
callback function for draw success with the draw number |
onOutLimitAlert |
function |
- |
callback function for limit times out |