# react-turnplate

**Repository Path**: kevin402502/react-turnplate

## Basic Information

- **Project Name**: react-turnplate
- **Description**: a configurable turnplate base on react
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-17
- **Last Updated**: 2024-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SnapShots

a configurable turnplate in React

![](https://user-gold-cdn.xitu.io/2019/5/18/16ac949855bdd316?w=360&h=360&f=gif&s=4345398)
---

# react-turnplate

```
$ npm install --save  react-turnplate
```

# how to use
```
  import ReactTurnPlate from 'react-turnplate'
  onTryRotate(){
    /* do some check stuff,if can not rotate return*/
    this.setState({canStartRotate:true})
  }

const reward_list = [{icon:'imageurl',name:'prize1',id:1},{icon:'imageurl',name:'prize1',id:2}]
  <ReactTurnPlate
          prizeList={reward_list}
          award={award}
          image_spin={require("../src/img/btn_spin.png")}
          background_1={require("../src/img/circle1_img.jpg")}
          background_2={require("../src/img/circle2_img.jpg")}
          canStartRotate={canStartRotate}
          onTryRotate={this.onTryRotate.bind(this)}
          rotateFinish={this.rotateFinish.bind(this)}
        />
```
you can also fork the code and `npm start` to run the example.

## props 

| params        | type   |  desc  |
| --------   | -----:  | :----:  |
| image_spin | string | spin button|
| background_1 | string | background_1|
| background_2 | string | background_2|
| prizeList     | array |  [{icon:'imageurl',name:'prize1',id:1},{icon:'imageurl',name:'prize1',id:2}]    |
| award        |   object  | award should be null first,after request  back return an object like prizelist[0]  |
| canStartRotate        |    bool    |  control the turnplate should startRotate  |
|onTryRotate | func| trigger after click the rotate button,should do some check stuff and if it's ok,set canStartRotate to be true then the turnplate start rotating,meanwhile request for the award and after the request finish,set the award |
|rotateFinish| func | |

## more
you can fork and check the example code to see the fully complishment.

**If you have any of ideas,don't forget to leave an issue! And also star haha**

## License

ISC