react-rolling-item v0.5.5
react-rolling-item
example
<>
<RollingItem
on={this.state.start}
column={3}
backgroundImage={imageFile}
backgroundSize="600px 564px"
introItemInfo={{ x: -39, y: -28 }}
itemInfo={
[
{ x: -39, y: -217, id: 'item_1', probability: 0 },
{ x: -39, y: -406, id: 'item_2', probability: 0 },
{ x: -241, y: -28, id: 'item_3', probability: 0 },
{ x: -241, y: -217, id: 'item_4', probability: 0 },
{ x: -241, y: -406, id: 'item_5', probability: 0 },
{ x: -437, y: -28, id: 'item_6', probability: 0 },
{ x: -437, y: -217, id: 'item_7', probability: 0 },
{ x: -437, y: -406, id: 'item_8', probability: 0 },
]
}
width={177}
height={181}
startDelay={1000}
fixedIds={[3, 4, 7]}
reset={this.state.reset}
completionAnimation={true}
onProgress={(isProgress, result) => { console.log(result); }}
/>
<button className="start_btn" onClick={this.onClick}>{!this.state.start ? 'START' : 'STOP'}</button>
<button className="reset_btn" onClick={this.onClickReset}>RESET</button>
</>
Props
props | type | descripton |
---|---|---|
on | boolean | roll start status |
column | number | number of columns to roll |
backgroundImage | string | |
backgroundSize | string | |
itemInfo | {id?: any, x: number, y: number, probability?: number} | |
introItemInfo | {x: number, y: number} | intro screen before rolling |
width | number | width of one item |
height | number | height of one item |
fixedIds | number[] or string[] | You can define the id that will be won in advance |
startDelay | number | post-start delay |
reset | boolean | random initialization of all items |
completionAnimation | boolean | whether you want to do an animation when the item stops (IE9 is not supported) |
rootClassName | string | You can set className to set a custom style on the root node |
onProgress | (progress: boolean, result?: any[]) => void | A callback function of the rolling animation process |
supported browsers
- IE9+, Chrome, Safari, Firefox, Whale, Mobile Safari, Mobile Chrome...
Features
- Create a roller by the number you set.
- Setting items using sprite image.
- Return items as a result of matching.
- Probability can be set.
- Added delay option before rolling start.
- Intro screen can be set.
- reset option.
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago