react-switch icon indicating copy to clipboard operation
react-switch copied to clipboard

Changing handleDiameter prop doesn't have any affect on the handle size

Open dhirajchawla2000 opened this issue 5 years ago • 9 comments

When I try to change the handleDiameter prop, it doesn't have any affect on the handle size. While the width and height props does update the width and height of the outer container. It seems to be happening due to

this.$handleDiameter = handleDiameter || height - 2;

in the constructor. Is there a way to fix this?

Actually I'm using react-switch as a toggle button in one of the widgets I'm working on and I want to have different width and height of the toggle button based on the viewport. Though the width and height props of the switch component does but the width and height of container, the handle diameter doesn't update the handle size.

dhirajchawla2000 avatar Sep 13 '19 05:09 dhirajchawla2000

+1

rachmulvey avatar Sep 16 '19 00:09 rachmulvey

+1

yogesh-jankin avatar Sep 17 '19 06:09 yogesh-jankin

+1

superern avatar May 07 '20 14:05 superern

As the original poster pointed out the problem is that the handleDiameter is set in the constructor. That could be changed with a little bit of work.

If someone would do a PR for it I'll consider merging it.

markusenglund avatar Dec 12 '20 20:12 markusenglund

bump

spyshower avatar Jun 24 '21 15:06 spyshower

GuruJustin's example works fine for me. https://codesandbox.io/s/bold-einstein-1v1jm?file=/src/index.js

markusenglund avatar Aug 15 '21 15:08 markusenglund

When I try to change the handleDiameter prop, it doesn't have any affect on the handle size. While the width and height props does update the width and height of the outer container. It seems to be happening due to

this.$handleDiameter = handleDiameter || height - 2;

in the constructor. Is there a way to fix this?

Actually I'm using react-switch as a toggle button in one of the widgets I'm working on and I want to have different width and height of the toggle button based on the viewport. Though the width and height props of the switch component does but the width and height of container, the handle diameter doesn't update the handle size.

Somehow the change isn't rendered directly in some cases. Try reloading the page after you have applied your change it should work.

naman-jn avatar Sep 27 '21 11:09 naman-jn

Has anyone added a handle border? Trying to attempt that now

Jordan1022 avatar Nov 22 '21 22:11 Jordan1022