Skip to content

lijinke666/react-turntable

Repository files navigation

react-turntable

npm npm

A HTML5 Turntable component for React

Screenshots

example

Installation

npm install react-turntable --save

Example

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 : -