I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application.
https://i.stack.imgur.com/I7oFb.png
To use the wheel as a React.js component, you simply include it like this:
<Wheel items={items} fullSpins={5} angle={0} />
The parameters for the Wheel component are as follows:
- [array] items
Represents different parts of the wheel along with their color and proportion. - [int] fullSpins
Determines how many spins the wheel will make before coming to a stop at the specified angle, adding visual appeal and excitement. - [float: 0..360] angle
Specifies the angle (in degrees) where the wheel is designed to stop.
In order to allow other components to spin the wheel, I believe utilizing property changes in a React.js-like manner would be the most suitable approach. By updating the angle property, I can set the transform: rotate(Xdeg), where X represents the current angle plus fullSpins multiplied by 360, then adding the new angle. This enables a smooth spinning motion with the help of transition-property: transform.
However, I am uncertain about the best way to handle this behavior within the context of React. While normally I might consider creating a method passed down to the wheel, spinning is primarily an internal action of the wheel itself. Ideally, it should automatically spin whenever the angle property is updated. But what if there's a need to spin it to the same position twice in a row, such as stopping at 90.0 degrees both times?
Would using componentWillReceiveProps() be appropriate? And if so, how can I determine whether the new spin request was made when the previous angle remained unchanged?