Skip to content
a configurable turnplate base on react
Branch: master
Clone or download
Latest commit 105e8c3 May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist degree problem May 23, 2019
example degree problem May 23, 2019
src degree problem May 23, 2019
.npmignore debute May 14, 2019
README.md readme change May 20, 2019
package-lock.json open source May 18, 2019
package.json degree problem May 23, 2019
react-turnplate-snapshot.gif open source May 18, 2019
react-turnplate-snapshot.mov open source May 18, 2019

README.md

SnapShots

a configurable turnplate in React

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

You can’t perform that action at this time.