# react-turntable

> A HTML5 Turntable component for React

Latest version **1.3.1** (published 2019-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-turntable
pnpm add react-turntable
yarn add react-turntable
bun add react-turntable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2019-07-29 |
| First published | 2017-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 25.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | jinke.li |
| Maintainers | jinke.li |
| Keywords | react, reactjs, ui, react-turntable, HTML5, rotate, turntable, prize, component |

## Links

- npm: https://www.npmjs.com/package/react-turntable
- Repository: https://github.com/lijinke666/react-turntable
- Homepage: https://lijinke666.github.io/react-turntable
- Issues: https://github.com/lijinke666/react-turntable/issues
- npm.io page: https://npm.io/package/react-turntable

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2019-07-29
- 1.3.0 — 2019-07-29
- 1.2.7 — 2018-08-28
- 1.2.6 — 2018-08-28
- 1.2.5 — 2018-08-12
- 1.2.4 — 2018-08-12
- 1.2.3 — 2018-08-12
- 1.2.2 — 2017-11-14
- 1.2.1 — 2017-08-26
- 1.2.0 — 2017-08-22
- 1.1.0 — 2017-08-22

## README

# react-turntable
[![npm](https://img.shields.io/npm/dm/react-turntable.svg?style=flat-square)](https://www.npmjs.com/package/react-turntable)
[![npm](https://img.shields.io/npm/l/react-turntable.svg?style=flat-square)](https://www.npmjs.com/package/react-turntable)
> A HTML5 Turntable component for React

## Screenshots
![example](https://github.com/lijinke666/react-turntable/blob/master/assetsImg/example.png)

## 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 = () => (
    <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` : `-`

---
_Source: https://npm.io/package/react-turntable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._