Unplanned
Last Updated: 30 Aug 2023 12:02 by ADMIN

In one of the latest versions of Flat Color Picker "format" property has been added to enable customizing the default input field that is presented to users, before it was always RGB. However, I found that the value that appears as an argument in "onChange" method is still RGB, no matter which format has been chosen.

For example:

const [color, setColor] = useState("000000");

const setColorFromPicker = useCallback(
  (event: FlatColorPickerChangeEvent) => console.log(event.value),
  [],
);

return (<FlatColorPicker
  value={color}
  format="hex"
  onChange={onChange}
/>

The value presented in the log will be "rgb(0, 0, 0, 0)" despite the format being set to "hex".

It would be very useful to have this configurable as well. I can see three possible solutions:

  • make "format" property affect both the input and the output; that would make the scenario above produce "#000000" log;.
  • create two separate properties, e.g. "inputFormat" and "outputFormat";
  • include both values in the passed structure, so that e.g. I could use "event.value.hex" to get "#000000" and "event.value.rgb" to get "rgb(0, 0, 0, 0)"

Best regards

Wojciech Wąs