Unable to drag alpha

[silverWolf818]

import {SketchPicker} from 'react-color'

<SketchPicker/>

alpha slider unable to work

[silverWolf818]

mac os chrome 84 ver

[Dror-Bar]

Experiencing the same issue on version 2.18.1. Had to use the solution suggested in this thread.

[appyofficial]

I had the same problem on chrome mac

Install the previous version using

npm install react-color@2.17.3 --save

Restart the app and you're done!

[dmitriy-komarov]

Install the previous version 2.17.3

Unfortunately this did not help. At least for Chrome (Linux).

[Dror-Bar]

@dmitriy-komarov try this:

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)}` 
}

Solution from the thread I linked.

[dmitriy-komarov]

@Dror-Bar, thx, it worked. I suppose this code should be added into the project.

[Dongd0825]

@dmitriy-komarov try this:

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)}` 
}

Solution from the thread I linked.

enhance version

const decimalToHex = (alpha: number) => {
     let aHex = Math.round(255 * alpha).toString(16);
     return alpha === 0 ? '00' : aHex.length < 2 ? `0${aHex}` : aHex;
}

const handleColorChange = (color: ColorResult) => {
  const hexCode = `${color.hex}${decimalToHex(color?.rgb?.a ?? defaultAlpha)}`;
};

[MobeenIkhtiar]

@yaeSakuras , any update for this issue?

[SummerLiu95]

@dmitriy-komarov try this:

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)}` 
}

Solution from the thread I linked.

enhance version

const decimalToHex = (alpha: number) => {
     let aHex = Math.round(255 * alpha).toString(16);
     return alpha === 0 ? '00' : aHex.length < 2 ? `0${aHex}` : aHex;
}

const handleColorChange = (color: ColorResult) => {
  const hexCode = `${color.hex}${decimalToHex(color?.rgb?.a ?? defaultAlpha)}`;
};

this work, thx