Is there a way to adjust the radius of the wheel?

[ChrisCJou]

Hi and thanks for the library! Is there a way to adjust the radius of the wheel? I believe the default is something like 500 px, but is there a way to increase it through the properties? Thanks!

[luchozamora1]

Hey @ChrisCJou thanks for reaching out! Do you mean changing the dimensions of the roulette on the screen to make it look bigger, or increasing the canvas height/width? Currently the default size of the canvas is 900x900 px, but it's being displayed on a max-height:445px;max-width:445px; container.

If you want to modify the dimensions of the wheel container, it can be done by wrapping the <Wheel /> component in a container and setting the wheel's max-height and max-width to unset, and height & width to 100% like so:

// css
.parent-container {
     width: 700px;
     height: 700px;

     > div {
          height: 100%;
          width: 100%;
          max-height: unset;
          max-width: unset;
     }
}

// tsx
<div class="parent-container">
     <Wheel ... />
</div>

If you want to modify the canvas size, we can add a prop to do so.

Let me know if you have any further issues!

[ChrisCJou]

Hey thanks for the reply! This is just what I was looking for. In regards to the canvas size, don't worry about it. With this, I don't foresee needing that. Thanks!

[luchozamora1]

@ChrisCJou good to know!