hxf31891 / react-gradient-color-picker Goto Github PK

Try https://gradient-package-demo.web.app/ in mobile browser.

When color pickers are present and one of them is set to gradient mode, the delete key on other inputs in the page stops working. Moving all color pickers into their own component did not resolve the issue.

When i press 'delete' in another input under these conditions the onChange event doesn't fire. Entering new characters works fine.

Following the README instructions to pass a customLocales object to the locales prop doesn't seem to have any effect.

Hi,
I'm using version 2.0.17 with react 18.1.0 and as soon as I call useColorPicker, I get a maximum update depth error.

Is there a way to fix this ?

Thanks

This should happen here.

I fixed it on my side by having this Styled-Components selector:

.ps-rl.bar-wrap-inner > div:first-child > div:not([class='handle']) {
  background-image: ${({ color }) => force90degLinear(color)} !important;
}

And the force90degLinear function looks like this:

function force90degLinear(color: string): string {
  return color.replace(
    /(radial|linear)-gradient\([^,]+,/,
    'linear-gradient(90deg,'
  );
}

Before	After

After adding a new gradient point with click and hold, it is not possible to slide while holding.

Since the edges of the picker are rounded, cursor cannot go to extreme points and never select values like #ffffff and #000000, they stop around #fafafa and #030303

Follow up on #1 (comment).

We need to make sure we're preserving behavior as we release new updates.

This is the pattern: rgb(<r> <g> <b> / <a>).

I tried tweaking the tokens comma but it didn't work.

I want to keep the eye picker but hide the solid/gradient controls but I am unable to do this because the hideControls hides all the top row

I'm building a WordPress plugin, and these gradients value is generated dynamically by the user or by the theme.

My gradient value is linear-gradient(to bottom, #C2A990 0%, #F9F9F9 100%)", name: "Vertical soft sandstone to white it doesn't have an angle. What can I do in this case ? I getting error for this.

ERROR: Uncaught Error: NaN%, RGBA(207,202,190,1) 0%, rgba(249,249,249,1) 100%): Missing )

It would be great if this package can handle any valid css gradients value. Can you help me with a path to achieve this target ?

My Code

<ColorPicker
      value={gradient}
      hideColorTypeBtns={true}
      className="bg-white border shadow-md"
      onChange={(data) => update(data)}
  />

All erros

Uncaught Error: ", name: "Vertical soft sandstone to white: Invalid input not EOF
    error webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:53
    getAST webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:61
    gradientParser webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:368
    getColors webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/formatters.js?:27
    PickerContextWrapper webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:46
    React 16
    onClick webpack://xynity-blocks/./src/components/input/Gradient.jsx?:67
    React 23
    <anonymous> webpack://xynity-blocks/./src/index.js?:13
    js http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:59
    __webpack_require__ http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:273
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:568
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:570
[vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js line 281 > eval:53:15](http://localhost/wp-content/plugins/xynity-blocks//dashboard/vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js%20line%20281%20%3E%20eval)

Uncaught Error: ", name: "Vertical soft sandstone to white: Invalid input not EOF
    error webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:53
    getAST webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:61
    gradientParser webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:368
    getColors webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/formatters.js?:27
    PickerContextWrapper webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:46
    React 17
    onClick webpack://xynity-blocks/./src/components/input/Gradient.jsx?:67
    React 23
    <anonymous> webpack://xynity-blocks/./src/index.js?:13
    js http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:59
    __webpack_require__ http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:273
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:568
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:570
[vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js line 281 > eval:53:15](http://localhost/wp-content/plugins/xynity-blocks//dashboard/vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js%20line%20281%20%3E%20eval)

The above error occurred in the <PickerContextWrapper> component:

PickerContextWrapper@webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:34:18
div
ColorPicker@webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/index.js?:40:20
div
div
GradientInput@webpack://xynity-blocks/./src/components/input/Gradient.jsx?:11:23
div
div
div
div
div
section
Colors@webpack://xynity-blocks/./src/settings/Colors.jsx?:106:68
Suspense
figure
div
section
Settings@webpack://xynity-blocks/./src/settings/App.jsx?:112:78
Suspense
div
div
App@webpack://xynity-blocks/./src/App.jsx?:66:74
NotificationContextContainer@webpack://xynity-blocks/./src/context/notification.jsx?:18:38

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.


Uncaught Error: ", name: "Vertical soft sandstone to white: Invalid input not EOF
    error webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:53
    getAST webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:61
    gradientParser webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:368
    getColors webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/formatters.js?:27
    PickerContextWrapper webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:46
    React 14
    onClick webpack://xynity-blocks/./src/components/input/Gradient.jsx?:67
    React 23
    <anonymous> webpack://xynity-blocks/./src/index.js?:13
    js http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:59
    __webpack_require__ http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:273
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:568
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:570
[vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js line 281 > eval:53:15](http://localhost/wp-content/plugins/xynity-blocks//dashboard/vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js%20line%20281%20%3E%20eval)

Hello and thanks for a great project! This is not necessarily a bug, more of a feature request.

What works: when I want to move the color pointer on the canvas, I can grab the current circle and move it wherever I want, the circle follows the cursor. If I click on a random place, the circle moves to that place. All that works well.

What doesn't work: if I mouse down (or tap) on a random place and start moving, the circle doesn't follow the cursor (until I release the mouse on desktop and, it seems, never on mobile?..).

I hope it makes sense, I don't know how to better describe it. This is especially inconvenient on mobile, as my fingers are too thick to tap precisely on the circle )). On mobile only a single tap seems to work for me, dragging doesn't work at all.

Here is an example of a color picker (no gradient though!) that does what I am trying to describe: https://omgovich.github.io/react-colorful/.

Am I missing something? How do I make this work? Or is it something that needs to be fixed?

Thanks in advance!

Hello,

If the width prop is given a value and the gradient type is used, the gradient percentage (not sure how to call it) selector is having wrong position when being dragged.

https://codesandbox.io/s/fragrant-morning-huitsf?file=/src/App.js

Hi folks, I am able to set individual colors as presets, but I am unable to set gradients as presets.
For example:

const presetColors =
['#000000', '#F5222D', '#FA8C16', '#FADB14', '#8BBB11', '#52C41A', '#13A8A8'];

const presetGradients =
[
  'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(250,219,20,1) 100%)',
  'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(139,187,17,1) 100%)',
  'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(82,196,26,1) 100%)',
  'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(19,168,168,1) 100%)',
  'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(22,119,255,1) 100%)',
  'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(47,84,235,1) 100%)',
]

<ColorPicker presets={presetColors} /> // works great
<ColorPicker presets={presetGradients} /> //loads and displays preview but then errors on click

Any ideas?

just found this library and loving it!

one nice enhancement would be to not render the top bar of the controls when it's contents are empty, and appropriately shift the layout

Can't change hue when node selection is leftmost.

Why do we add gradient value for default value
see this error

This happens after installation.

"next": "12.1.6",
"react": "18.1.0",

error - ./node_modules/react-best-gradient-color-picker/lib/components/Portal.js:9:0
Module not found: Can't resolve 'uuid'

Import trace for requested module:
./node_modules/react-best-gradient-color-picker/lib/components/EyeDropper.js
./node_modules/react-best-gradient-color-picker/lib/components/Controls.js
./node_modules/react-best-gradient-color-picker/lib/components/Picker.js
./node_modules/react-best-gradient-color-picker/lib/index.js
./pages/app/content-engine.js

https://nextjs.org/docs/messages/module-not-found

Can I use this with React Native?

All code from readme or https://gradient-package-demo.web.app/

I'm the second one hopping into this project, and I doubt will be the last one.

Ensuring this lib enforces an agreed code style that everyone joining in has to follow can really avoid annoying nitpicks down the road.

Hello,

I'm not sure if I'm missing something but I have some issues to get the color picker look like in the demo. From what I can see I have to add line-height: 1.5 to the wrapper, and *, :after, :before {box-sizing: border-box;} . Adding the line height is simple, adding the box-sizing however is breaking styling in the application on multiple places.

Are there some plans to include the default styling in the package itself or is there some other way how to achieve the styling to look as expected :) ?

Another issue I encountered is that when I'm dragging the color selector the moment the cursor is not within the window it looses focus.

Dear @hxf31891

I wanted to thank you for developing this great colour picker.
I've found a bug in the picker which occurs when you scroll the page/parent wrapper of the colour picker.
If there is any scroll in the page and scroll is occurred and position of the colour picker is changed on the page, the picker stops putting the pointer in the correct position and gets stuck at the top.

I found that if you add something like the following to the index.js it would solve the issue.
I have done this just for the whole window scroll and I believe this needs to be changed to be applied to every parent element of the picker.

const onScroll = () => { return setBounds(contRef?.current?.getBoundingClientRect()); }; window.addEventListener('scroll', onScroll, {once: true});

Could you please fix this issue and release a new update on NPM so I can grab the latest version and use it?

Thank you very much in advance.

I was wondering if there is planned support for Typescript type support?

• Thank you so much for this picker.

it would be great to be able to hide options more granularly e.g. I am enabling gradients, but only linear, without angles etc.

As a follow up to #5 (comment) where width prop was added, we discussed the requirement for a new height prop to achieve a design similar to that shown below. I've created this separate issue for height as the responsiveness task is now closed off.

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.

Problem:
This issue is related to #61. Now the gradient controls would also disappear when hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns are selected.

Expect:

The gradient controls still exist.

The package doesn't support Next.js at this time due to this error:
https://nextjs.org/docs/messages/css-npm

./node_modules/react-best-gradient-color-picker/lib/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-best-gradient-color-picker/lib/index.js

The fix would be to allow users to import the css themselves and not do it for them automatically.

In firefox, the eyedropper doesn't appear to actually select the color. Seeing https://gradient-package-demo.web.app/ and in own use case

It would seem that 'selectedPoint' and 'deletePoint' is no longer working in v=2.0.21

The 'selectedPoint' only returns a 0 no matter which point is selected. And even when a 0 is passed into deletePoint() it returns an error saying "A gradient must have at least 2 colors, disable your delete button..."

--
The trash-can 'delete point' that's part of the component's inherent controls still works though.

Problem:
There are empty div as the above image shown when hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns are selected.

Expect:
The div would disappear ("display: none").

Greetings!
First of all, thank you for this awesome library!

In conditions where I use the library, there is a possibility that a value doesn't exist or just doesn't need it.
Therefore, I have just a little suggestion to simplify the logic of the hook useColorPicker and remove the check (and remove console.log).
Business logic can be different, and saying in an imperative approach that you must provide a value is not the optimal case for everyone.

Hi,

it has dependency "tinycolor2": "^1.4.2"and when pulled it's stored

tinycolor2@^1.4.2:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==

there is breaking change in 1.5.0 bgrins/TinyColor#249

Could you update the dependency to "tinycolor2": "1.4.2" or fix it using updated library?

Hi,

1st of all, thanks for making this lib :)

Not a bug, just a thing I noticed: I was playing around with the demo and noticed it's quite tedious to remove color stops (using the trash button). Would be great to just being able to use Backspace or even drag n drop the color stop out of the track so you don't require a button in your UI to remove them. Example: https://cssgradient.io/

I think using the delete/backspace key can be achieved using the hook somehow, but the drag n drop method seems more complicated I assume?

Anyway, just leaving this here and would love to see it.

Thanks and keep it up :)

Hi.

It's important that this tool supports the HEXA color values. Please add this feature ASAP.

Best.

When trying to set alpha value starting with 7 (e.g. 75), input will convert it into decimal number.

Behavior is visible in the demo picker.

When dragging the color around inside the large color square to choose the color 2 odd behaviors are happening:
1: Dragging around quickly can cause the color to change slightly (from purple to blue in the video)
2: Dragging to a bottom corner causes the color to change to red.

Both of these behaviors are visible in the demo picker. The color should stay the same unless changed in the rainbow slider or directly changing the inputs to something else.

Hi,

currently the hideOpacity and hideHue props are not working since those changes are not published to NPM yet. I asked for it in the PR already but it hasn't happened yet, so this becomes an issue for us.

Can this be done?

Cheers

It's pretty self explanatory. A lot of applications these days have a dark mode as secondary or even primary option. Without it the picker looks fairly out of place in these UI's.

The getGradientObject return value of useColorPicker is great. To take that value and then re-load it into a gradient would be super as well -- this would make saving/loading flows quite simple as opposed to calling all of the individual setters.

This would be the preferred re-usable pattern where the picker is not used for CSS but shaders etc.

My Code

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');

  return <ColorPicker value={color} onChange={setColor} />
}

My requirement is very simple, which is to get the color selected by the user. However, in the current design, the onChange event is triggered after the user selects a gradient point, but the user has not finished the selection yet. As a result, they are unable to continue selecting.

Hey! Your color picker looks amazing and it'd suit my page really well, but after importing it, I got error

, then I turned off strict mode and declared it in

.d.ts file, so import works now, but the cursor is not moving, here in this gif you can see the problem

React and DOM ver.: 18.2.0,
Tsx, Next.js

Hi, by default I pass the HEX color as initialize value, but look like it not accept the HEX color, the error said:

is there anyway accept the HEX color as initialize value? Thanks

When using hideOpacity, it hides the opacity slider, but users are still able to edit the alpha input. Would it make sense to hide alpha input with opacity? Or create a second option to hide alpha? For my use case, we don't want users to able to add alphas - just RBG.