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.