react-spin-game
react-spin-game is a wheel of prizes game, spinning game build using reactjs
Install
npm install --save react-spin-game
Preview
Usage
import React, { Component } from 'react'
import SpinAndWin from 'react-spin-game'
import 'react-spin-game/dist/index.css'
const freeSpinGifts = [['test1','red'], ['test2','black'], ['test3','#808080'], ['test4','blue'], ['test5','gray'], ['test6','blue']]
class Example extends Component {
render() {
return <SpinAndWin data={freeSpinGifts}/>
}
}
Additional properties
interface SpinGameData {
data: Array<Array<string>>
hideButton?: boolean
result?: string
time?: number
minTime?: number
maxTime?: number
removeButtonEffect?: boolean
fontSize?: number
fontFamily?: string,
horizantalText?:boolean
}
Description:
- data: data to be displayed in spin game and their background colors, as array of arrays
- Example:
[['test1','red'], ['test2','black'], ['test3','#808080'], ['test4','blue'], ['test5','gray'], ['test6','blue']]
- hideButton: indicator to display the
SPIN button or not
- result: the result of spining the wheel
- time: the time of the transition after the wheel is spined
minTime and maxTime: the minimum and maximum time for the transition, in case that you need the spin time to be random between a range of two numbers
- removeButtonEffect: indicator to stop the functionality of the
SPIN button
- fontSize: to change the font size for the text
- fontFamily: to change the font family for the text
- horizantalText: to switch the text to be horizontal instead of vertical
Hint :
you can also pass ref prop to SpinAndWin component to extract the function responsible for the spinning of the wheel, if you wish to use it on another component.
import React ,{ useRef }from 'react'
import SpinAndWin from 'react-spin-game'
import 'react-spin-game/dist/index.css'
const freeSpinGifts = [['test1','red'], ['test2','black'], ['test3','#808080'], ['test4','blue'], ['test5','gray'], ['test6','blue']]
const App = () => {
const ref = useRef<any>(null)
return <>
<SpinAndWin ref={ref} data={freeSpinGifts} />
<button onClick={()=>ref.current.handleSpin()}>Spin</button></>
}
export default App
License
MIT © ahmadalrasheed
