https://github.com/lijinke666/react-turntable
:dart: A HTML5 raffle turntable component for react
https://github.com/lijinke666/react-turntable
acitve component draw-a-lottery-or-raffle html5 lotto prize-turntable react react-turntable rotate turntable
Last synced: 5 months ago
JSON representation
:dart: A HTML5 raffle turntable component for react
- Host: GitHub
- URL: https://github.com/lijinke666/react-turntable
- Owner: lijinke666
- License: mit
- Created: 2017-08-21T10:32:17.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:17:56.000Z (over 3 years ago)
- Last Synced: 2025-07-23T17:49:57.947Z (12 months ago)
- Topics: acitve, component, draw-a-lottery-or-raffle, html5, lotto, prize-turntable, react, react-turntable, rotate, turntable
- Language: JavaScript
- Homepage: https://lijinke666.github.io/react-turntable/
- Size: 3.33 MB
- Stars: 25
- Watchers: 0
- Forks: 8
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-turntable
[](https://www.npmjs.com/package/react-turntable)
[](https://www.npmjs.com/package/react-turntable)
> A HTML5 Turntable component for React
## Screenshots
## Installation
```
npm install react-turntable --save
```
## Example
### [Live Demo](https://lijinke666.github.io/react-turntable/)
## Development
```
git clone https://github.com/lijinke666/react-turnatable
yarn or npm install
npm start
```
## Usage
```jsx
import React from "react"
import ReactDOM from "react-dom"
import ReactTurntable from "react-turntable"
import "react-turntable/assets/index.css"
const styles = {
justifyContent:"center",
alignContent:"center",
display:"flex"
}
const prizes = [
'Durex', 'MI', 'Meizu',
'iphone 6s', 'iphone 6s plus', 'Chafingdish',
'WeiLong','masturbation cup'
]
const options = {
prizes,
width: 500,
height: 500,
primaryColor: "#83AF9B",
secondaryColor: "#C8C8A9",
fontStyle:{
color:"#fff",
size:"14px",
fontVertical:true,
fontWeight:"bold",
fontFamily:"Microsoft YaHei"
},
speed : 1000,
duration:5000,
clickText:"Click",
onStart(){
//If you want before the rotate do some...
console.log('start...');
//If you want stop rotate you can return false
return true
},
onComplete(prize){
console.log('prize:',prize)
}
}
const Demo = () => (
)
ReactDOM.render(
,
document.getElementById('root')
)
```
## Options
- options.prizes
- `Desc` : `prizes of the turntable prizes length >=2`
- `Type` : `array`
- `Default` : `-`
- options.width
- `Desc` : `width of the turntable`
- `Type` : `number`
- `Default` : `500`
- options.height
- `Desc` : `height of the turntable`
- `Type` : `number`
- `Default` : `500`
- options.primaryColor
- `Desc` : `primary color of the turntable`
- `Type` : `string`
- `Default` : `#83AF9B`
- options.secondaryColor
- `Desc` : `secondaryColor color of the turntable`
- `Type` : `string`
- `Default` : `#C8C8A9`
- options.speed
- `Desc` : `rotate speed of the turntable`
- `Type` : `number`
- `Default` : `1000 (ms)`
- options.duration
- `Desc` : `rotate total time of the turntable`
- `Type` : `number`
- `Default` : `5000 (ms)`
- options.clickText
- `Desc` : ` click text of the turntable start game btn ( Supports custom buttons )`
- `Type` : `string || reactNode`
- `Default` : `Start`
- options.fontStyle
- `Desc` : `prize text style of the turntable`
- `Type` : `Object`
- fontStyle.color
- `Desc` : `text color`
- `Type` : `string`
- `Default` : `#fff`
- fontStyle.size
- `Desc` : `text font size`
- `Type` : `number`
- `Default` : `14`
- fontStyle.fontVertical
- `Desc` : `The text is arranged vertically of the turntable (If the text is very long, you can set the options 'true')`
- `Type` : `boolean`
- `Default` : `false`
- fontStyle.fontWeight
- `Desc` : `text font weight`
- `Type` : `string`
- `Default` : `bold`
- fontStyle.fontFamily
- `Desc` : `prize text font`
- `Type` : `string`
- `Default` : `Microsoft YaHei`
- options.onComplete
- `Desc` : `game complete callback of the turntable (return current seleted prize)`
- `Type` : `Function`
- `Default` : `-`
- options.hiddenButton
- `Desc` : `hidden action button`
- `Type` : `boolean`
- `Default` : `false`
- options.getTurntable
- `Desc` : `getTurntable={turntable => turntable.start() turntable.stop()}`
- `Type` : `Function`
- `Default` : `-`