Missing dependency & Feature request

[wilsmex]

Issue: 1) When installing the package I got the error "'Could not resolve "uuid"'". Manually requiring that package solved the issue. Is there a missing dependency for that? 2) The returned CSS gradient string has casing inconsistencies. Make sure to always use lowercase for the RGBA string value. Currently I'm seeing this string with stops with both casing variants: "linear-gradient(90deg, rgba(35,28,121,1) 16%, RGBA(95,86,201,1) 74%)"

Feature request: Add an option to return/convert the css color string for gradients to an array of color stops with associated percentages and colors? I'm wanting to use Fabric.js and it requires a gradient object with stops (between 0 - 1) and associated colors like so:

colorStops: {
    0: "red",
    0.2: "orange",
    0.4: "yellow",
    0.6: "green",
    0.8: "blue",
    1: "purple"
  }

If there was a getGradientStops() or something, I could then use the included conversion functions to get the shape of data how I need.

[hxf31891]

Hi @wilsmex, I'll take these one at a time.

1. It's quite possible that there is a missing package, I recently updated the package.json. Will look into that now.
2. Unfortunately, lowercasing the value as you are describing is not possible considering the pickers current set up. The uppercase portion denotes the "selected point".
3. The feature you are describing is certainly something that could be included in the hook. I'll look at including it in the upcoming version.

[wilsmex]

Ah, I see. I was wondering why the captital RBG kept hopping spots on me when trying to parse that with regex! If you are able to add some feature like this it would also need the 'angle' value in there somewhere. Something like (I'm no programmer, so feel free to ignore as just thinking this on the fly as a consumer without understanding your package structure at all)

{
    type : 'gradient' // gradient / solid
    style : 'linear', // linear / radial
    mode: 'rgba',
    stops : [
        [0,255,0,0,1], // percentage, r,g,b,a
        [0.5,0,255,0,1] // percentage, r,g,b,a
        [1,0,0,255,1] // percentage, r,g,b,a
    ],
    degrees: '45', // angle degrees of gradient
}

Great package btw!

[hxf31891]

@wilsmex Thanks man! Appreciate that.

I think the feature you are describing is very doable. I will try and get it included in the next release and update you here on the progress!

[hxf31891]

Your requested feature is now available in v2.1.11 through the useColorPicker hook which now returns the 'getGradientObject' function

To use, import the hook like so: import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

Grab the function from the hook and be sure to pass the value and callback in like so: const { getGradientObject } = useColorPicker(value, callback)

Run the function whenever desired to get the value: const gradientObject = getGradientObject()

Example value:

{
    "isGradient": true,
    "gradientType": "linear-gradient",
    "degrees": "40deg",
    "colors": [
        {
            "value": "rgba(27,107,235,1)",
            "left": 0
        },
        {
            "value": "rgba(25,245,157,1)",
            "left": 100
        }
    ]
}