search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 100 forks source link

Can one set custom background transition? #113

Open sunknudsen opened 2 years ago

sunknudsen commented 2 years ago

Trying to time switch toggle with dark mode transition… thanks so much for component!

markusenglund commented 2 years ago

Hi, if I understand you correctly you want the color transition of the switch to have the same duration as the dark mode transition? I don't think it's a good idea to mess with since the transition property is already set to match the speed of the toggling. From the source code:

transition: $isDragging ? null : "background 0.25s"
sunknudsen commented 2 years ago

Hey @markusenglund,

If you go to https://sunknudsen.com/privacy-guides and click account icon (bottom right), you can switch between light and dark modes (used react-switch, thanks!).

I wanted switch transition from light to dark mode (hardcoded to 0.25s in react-switch) to match transitions of website (which, at the time, were set to 0.3s… ended up using same delay as react-switch given delay cannot be changed using props).

Would be nice if transition delay, timing function, etc… could be user-configurable using props.

Thanks again for component!

markusenglund commented 2 years ago

Got it. That could absolutely be implemented as a prop, but maybe it's a bit too rare of a use-case to be added to the API, I'm not sure.