Merge branch 'main' of github.com:schnubor/react-gradient-color-picker

README.md

@@ -11,15 +11,6 @@
 - You can completly customize the UI by hiding the included elements and using the hook to build your own
 - You can also customize preset options by passing in an array of rgba colors (see custom presets below)
 
-### Version 2.0.11
-- Add width prop
-
-### Version 2.0.14
-- Add height prop
-
-### Dev Plan
-- v3 in TS
-
 <br /> 
 
 <img alt="" src="https://gradient-package-demo.web.app/gradientPickerImg.png" width="100%" />
@@ -132,6 +123,7 @@ function MyApp() {
 | deletePoint      | index of point (num) | Delete one of the gradients colors                           |
 | addPoint         | position of point (num, 0 - 100) | Add a new color to the gradient                  |
 | setPointLeft     | value (num, 0 - 100) | Update the position (left) of the currently selected gradient color |
+| getGradientObject|                      | get the gradients value parsed into a key/value object (see example below)|
 
 ### Available State
 
@@ -261,6 +253,43 @@ function MyApp() {
 }
 ```
 
+### Getting Value in Object Form
+The picker returns the new value as a css gradient string but you may need it parsed as an object. This can easily be accomplised by using the getGradientObject function returned by the useColorPicker hook like so:
+
+```js
+import React from 'react'
+import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'
+
+function MyApp() {
+  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
+  const { getGradientObject } = useColorPicker(color, setColor);
+  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
+  //       }
+  //     ]
+  // }
+
+  return(
+    <div>
+      <ColorPicker value={color} onChange={setColor} presets={previousColors} />
+    </div>
+   )
+}
+```
+
 <br />
 
 ## LEGACY V1 - Manual Control - Customizing UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "2.0.17",
+  "version": "2.1.11",
   "description": "An easy to use color/gradient picker for React.js",
   "main": "lib/index.js",
   "scripts": {
@@ -28,7 +28,8 @@
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+    "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.3",
@@ -57,8 +58,6 @@
   "dependencies": {
     "html2canvas": "^1.4.1",
     "lodash.throttle": "^4.1.1",
-    "prop-types": "^15.8.1",
-    "tinycolor2": "^1.4.2",
-    "uuid": "^8.3.2"
+    "tinycolor2": "^1.4.2"
   }
 }