#react-luckydraw

Installation

$ npm install --save react-luckydraw

Usage

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>
        )
    }
}

Props

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