Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
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