Package Exports

react-turntable
react-turntable/assets/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-turntable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-turntable

A HTML5 Turntable component for React

Screenshots

example

Installation

npm install react-turntable --save

Example

Live Demo

Development

git clone https://github.com/lijinke666/react-turnatable
yarn or npm install
npm start

Usage

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 = () => (
    <div style={styles}>
        <ReactTurntable {...options}/>
    </div>
)
ReactDOM.render(
    <Demo />,
    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 : -