title: Spinning wheel in React.js
body: <p>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).</p>
  
  <p><a href="https://i.stack.imgur.com/I7oFb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I7oFb.png" alt="The spinning wheel"></a></p>
  
  <p>I made the wheel a React.js component that you use like this:</p>
  
  <pre><code>&lt;Wheel items={items} fullSpins={5} angle={0} /&gt;
  </code></pre>
  
  <p>Parameters are:</p>
  
  <ul>
  <li>[array] <strong>items</strong><br>
  Parts of the wheel defining their color, proportion etc.</li>
  <li>[int] <strong>fullSpins</strong><br>
  How many spins the wheel makes before stopping at the requested <strong>angle</strong>. This is for visual appeal and more thrill.</li>
  <li>[float: 0..360] <strong>angle</strong><br>
  The angle in degrees at which the wheel is about to be stopped.</li>
  </ul>
  
  <p>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 <code>angle</code> is changed, I would set the <code>transform: rotate(Xdeg)</code>, where X is <code>current angle + fullSpins * 360 + angle</code>. With <code>transition-property: transform</code> it spins smoothly.</p>
  
  <p>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 <code>angle</code> 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?</p>
  
  <p>Should I use <code>componentWillReceiveProps()</code>? If so, how to know if the new spin was actually requested when the previous angle was the same?</p>