casesandberg / react-color

:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
http://casesandberg.github.io/react-color/
MIT License
11.99k stars 914 forks source link

Alpha not updating #655

Open tjvg91 opened 4 years ago

tjvg91 commented 4 years ago

when I change the color property, or change it by clicking the palette, the rgb values change, but not alpha.

superadminfabian commented 4 years ago

Same issue for me. HandleChangeComplete returns the object with correct alpha, but the alpha in the SketchPicker keeps going back to 100 after clicking an alpha or entering via keyboard.

stefanfuchs commented 4 years ago

Same problem here.

stefanfuchs commented 4 years ago

This seems to be the issue: #416 The hex values do not have alpha yet.

I managed to solve the problem by using the rgba value when the alpha isn't 1.

const handleColorChange = (color: ColorResult) => {
    let colorStr = color.hex
    if(color.rgb.a !== 1){
      colorStr = `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`
    }
    // do something with colorStr...
}
GugaGongadze commented 4 years ago

Here is the solution for 8-digit hex code:


const decimalToHex = (alpha: number) => alpha === 0 ? '00' : Math.round(255 * alpha).toString(16)

const handleColorChange = (color: ColorResult) => {
   const hexCode = `${c.hex}${decimalToHex(c.rgb.a)}` 
}
casesandberg commented 4 years ago

Ah, yes, unfortunately this does not support having alphas on pre-defined swatches yet. I will track this in the 3.0.0 milestone to make sure it gets fixed in the new release.

cmdparkour commented 1 week ago

keyboard

wow, i fixed it by your answer, thanks very much