Spinning wheel in React.js

Question

I'm creating a lottery app with React.js. There is a spinning wheel in SVG format. You can spin a wheel and it smoothly stops at a given position (my app makes it random position).

I made the wheel a React.js component that you use like this:

<Wheel items={items} fullSpins={5} angle={0} />

Parameters are:

• [array] items
  Parts of the wheel defining their color, proportion etc.
• [int] fullSpins
  How many spins the wheel makes before stopping at the requested angle . This is for visual appeal and more thrill.
• [float: 0..360] angle
  The angle in degrees at which the wheel is about to be stopped.

I'd like any other component to be able to spin the wheel, so I assume that the React.js-like way to do it would be to do it on a property change. When angle is changed, I would set the transform: rotate(Xdeg) , where X is current angle + fullSpins * 360 + angle . With transition-property: transform it spins smoothly.

I'm not sure how to handle it React way. Normally I would consider a method that would just be passed to the wheel, but spinning is internal behavior of the wheel itself. Perfectly, it would just spin on angle property update. However, what if I want to spin it to the same position, like when two times in row it was decided to stop it at the angle 90.0 degrees?

Should I use componentWillReceiveProps() ? If so, how to know if the new spin was actually requested when the previous angle was the same?

Answer 1

You could use componentDidUpdate() to check if props has changed and then call your spin function accordingly.

Something like this:

class Wheel extends Component {

    componentDidUpdate(prevProps){
        if(prevProps.angle !== this.props.angle) this.spinFunction()
    }

    spinFunction(){
        // update transform: rotate(Xdeg) etc here
    }
}