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

onColor and offColor transparent #40

Closed brightsider closed 5 years ago

brightsider commented 5 years ago

Hello. I set 'transparent' color for onColor and offColor. It's working but shows errors in console: Invalid prop 'onColor' supplied to 'ReactSwitch'. 'onColor' has to be either a 3-digit or 6-digit hex-color string. Valid examples: '#abc', '#123456'

markusenglund commented 5 years ago

Yup, the component is not built to work with colors that are not hex-strings. You'll notice that if you put in any other color like "red", the color will still be transparent. That's is because the colors are re-computed to nonsensical hex-strings that the browser doesn't understand. (In the case of "transparent" the color is actually set to #rraann :smile: )

brightsider commented 5 years ago

@markusenglund wow, it’s unexpected :) Maybe this should placed in readme?

markusenglund commented 5 years ago

It's there actually. Under the big API table so a bit hard to notice.

brightsider commented 5 years ago

I don't see it in the documentation and even through the search

markusenglund commented 5 years ago

This is what I was referring to from the README:

The following props have to be either 3-digit or 6-digit hex-colors: offColor, onColor, offHandleColor, and onHandleColor. This is because this library calculates intermediate color values based on the hex-color strings.

Examples of valid colors: '#abc', '#123456'

Examples of invalid colors: 'red', 'rgb(0,0,0)'