wondermarin / react-color-palette Goto Github PK

The Problem:

In the latest version of the react-color-palette library, the ability to individually control the visibility of each color input (RGBA, HEX, HSV) seems to have been removed. This feature was present in previous versions and was useful for scenarios where we wanted to show or hide individual color inputs based on certain conditions like color changes or user interactions.

The Solution:

It would be beneficial to reintroduce this feature in the next version of the library. This could be implemented by adding new props to the color palette component: hideRGB, hideHEX, and hideHSV, each of which controls the visibility of the corresponding input. When hideRGB is true, the RGB input would be hidden, and so on for HEX and HSV.

Additional Context:

The reintroduction of this feature would provide greater flexibility for users who want to customize the visibility of each color input in their color palette. It would be particularly useful in scenarios where some color inputs are not relevant or could potentially confuse the end user. For example, if a user is only interested in HEX colors, they could hide the RGB and HSV inputs to simplify the interface.

My Environment

Expected Behavior:

useColor can accept a rgb or hsv initial color as documented

Actual Behavior:

Using a color model that is not "hex" will trigger an infinite loop.

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Additional Context:

Reproduced in this sandbox:

https://codesandbox.io/s/react-color-palette-infinite-loop-lzk0e?file=/src/App.tsx

My Environment

Expected Behavior:

When opening a palette hooked to a color state and a color object, cursor should be positioned on the right color it has been hooked to

Actual Behavior:

When opening the palette, the cursor is at the bottom left of the color picker (#000000 position)

My Environment

Expected Behavior:

Hue bar allows correct selection of hue even with hideHSB enabled

Actual Behavior:

It seems hue bar depends on props hideHSB, hideHEX, hideRGB in terms of width, because of this we have an incorrect selection of hue when we remove one of the format field, as you can see in the screenshot below

hideHSB enabled

Thx for great and light library = )

My Environment

Expected Behavior:

onChangeComplete should be invoked after HEX color code input change

Actual Behavior:

onChangeComplete doesn't get invoked

Additional Context:

Found this useful package and I'm having issues downloading it to work in my React version v16.13.1

My Environment

Expected Behavior:

To support React version 16 and above

Actual Behavior:

Error display while installation

`npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^16.13.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/react-color-palette
npm ERR! react-color-palette@"^4.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\hp\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hp\AppData\Local\npm-cache_logs\2021-04-22T11_59_33_775Z-debug.log`

simple question:
is this library works on react v17 or more?
cause I've recently upgraded react v17 and palette's css property: background-image got vanished.

Is this issue relates with react version?

The Problem:

No support on touch screens

The Solution:

Add support for touches

The Problem:

I made simple example to show the problem

const ColorParam: React.FC<{  value: string }> = ({  value }) => {
    const [color, setColor] = useColor('hex', value)

    return <ColorPicker width={240} height={120} color={color} onChange={setColor} hideHSV hideRGB dark alpha />
}

export default ColorParam

In here value is assign from props, and it does not update the state when props updated from parent component since useState is doing so in the React.

The Solution:

I suggest to use custom hook for useState in useColor.hook.ts

**Current : **

export function useColor<M extends keyof Color, C extends Color[M]>(
  model: M,
  initColor: C
): [Color, React.Dispatch<React.SetStateAction<Color>>] {
  const [color, setColor] = useState(() => {
    switch (model) {
      case "hex":
          .....
      default:
        return toColor("hex", "#121212");
    }
  });

  return [color, setColor];
}

**Improvement : **

export function useColor<M extends keyof Color, C extends Color[M]>(
  model: M,
  initColor: C
): [Color, React.Dispatch<React.SetStateAction<Color>>] {
  const [color, setColor] = useStateWithProps(() => {
    switch (model) {
      case "hex":
           ....
      default:
        return toColor("hex", "#121212");
    }
  });

  return [color, setColor];
}

**Custom Hook : **

export const useStateWithProps = <T>(defaultValue: T) => {
  const [value, setValue] = useState(() => defaultValue)

  useEffect(() => {
    setValue(defaultValue)
  }, [defaultValue])
  return [value, setValue] as const
}

Are we having the feature of opacity slider ???

My Environment

Expected Behavior:

I can move/resize the component that contains the ColorPicker without any issues.

Actual Behavior:

When moving/resizing the element that contains the ColorPicker, the Saturation component boundaries stay the one from the first render ( the zone where the mouse can move the cursor is offset from the actual display zone ).

Additional Context:

From my investigation, the issue is related to the Interactive component & the useBoundingClientRect hook.
As the useBoundingClientRect does the node#getBoundingClientRect only during the first render, any changes (either position or size) are not taken into account.

To deal with position changes, the move event handler from the Interactive component should get an updated left & top position in order to be accurate.

I have a fix on my fork that rely on a third party library (use-resize-observer) : Wondermarin:react-color-palette:main...msebire:react-color-palette:fix-58

My Environment

Expected Behavior:

The color picker is used to select the background color for the selected entity. The entity is shown on the main screen, the color picker is rendered on the sidebar (I use semantic-ui-react widely in the project). When I test the sidebar appearing on clicking on a menu button, the test sees the sidebar, the color-picker on it, and the other HTML elements with the info received from props.

Actual Behavior:

The test fails with the error message mentioned in the title of the request on the row with useColor initialization hook.

Additional Context:

I made a setup of the jest-canvas-mock lib, as Google suggested.
I tried to place the color picker on the main page to check if the sidebar may use canvas as well and those two interfere with each other.
I still have the same error. Bear with me, if it is a well-known issue, I could not find it among the closed/opened list.

My Environment

Expected Behavior:

according to the documentation:
hideHSV | bool | false | Hide HSV input.

example given:

Actual Behavior:

The hideHSV prop does not work; hideHSB does work:

Additional Context:

react-color-palette/src/components/ColorPicker.component.tsx line 14

Great library, thank you!

Hi. I'm using react-color-palette with Popover component in MUI.
I place ColorPicker in the basic popover modal like the example below.
https://mui.com/material-ui/react-popover/#basic-popover

Then cursor in saturation and hue doesn't move to the right end.
See the maximum position of cursor I can drag in the image below.

It seems that bug is caused by useBoundingClientRect hook in the code.

My Environment

Please give an option to setColor using a custom input feild of my choice

The Problem:

Responsiveness of the layout is missing, we have to set the height width of the picker, but then i opened it on the mobile layout it does not work

The Solution:

so if you can add min/max height/width or some responsive feature, will make this library great.

Additional Context:

Add any other context about the feature request here.

The Problem:

I would like to add a more following function in to the app:

1. Function for converting RGB value to integer.
   → Show live value on the interface (same like #HEX value)
   → Able to input the number, and change the color.
   → Able to pass the current value to another function in my app.

2. Ability to add a blank custom input field into the interfaces (with editable caption)
   → This doesn't need to show any value, I'd like that use can able to type input by themselves.

The Solution:

Converting function is pretty simple as below, but I don't know how to add it into the app..

// convert three r,g,b integers (each 0-255) to a single decimal integer (something between 0 and ~16m)
function colourToNumber(r, g, b) {
  return (r << 16) + (g << 8) + (b);
}

// convert it back again (to a string)
function numberToColour(number) {
  const r = (number & 0xff0000) >> 16;
  const g = (number & 0x00ff00) >> 8;
  const b = (number & 0x0000ff);
  
  return [r, g, b];
  // or eg. return `rgb(${r},${g},${b})`;
}

Could you help me please? contact: [email protected]

The Problem:

Users are unable to modify the alpha channel / opacity of colors.

The Solution:

Add alpha channel / opacity slider.

Additional Context:

Awesome work. Just wondering if you plan to implement an alpha channel slider or anything similar.

When setting "sideEffects": false in the package.json file of this package, it leads to an issue where the CSS file is excluded from the resulting bundle, essentially shaken out from the tree. This is a known issue that affects many packages.

As described in the webpack documentation on Tree Shaking, I believe a better solution might be to specify specific files that should be treated as side effects e.g. "sideEffects": ["*.css"] ensuring that the CSS file is included in the bundle and not eliminated during the tree shaking process.

I have created a PR #69 fixing this issue.

Well, that's not an issue. I just surprised that the only picker that can handle css variables has zero stars on github. React-color fails, at least in my hands.

PoC:

// Store.ts
const getCssValue = (key: string): string => {
  return window
    .getComputedStyle(document.documentElement)
    .getPropertyValue(`--${key}`);
};

const setCssValue = (key: string, value: string) => {
  document
    .documentElement.style.setProperty(`--${key}`, value);
};

// Component.ts
function Main() {
 const [color, setColor] = useColorObject('hex', Store.getCssValue('my-color')); // references to var(--my-color)

 return <ColorPicker
       width={200}
       color={color}
       onChange={(e) => {
         setColor(e);
         Store.setCssValue('my-color', e.hex);
       }}
     />
}

do we have the option to add

• recently used colors ?

My Environment

MacOS 11.6 (2017 15-inch)
2.8ghz Quad-Core Intel Code i7
Radeon Pro 555 2GB / Intel HD 630 1536 MB

Expected Behavior:

The slider should be at the zero position for an 8 character hex, i.e. #12345600

Actual Behavior:

Slider resets to full position when alpha channel set to 0 via hex

Additional Context:

Appears to be an issue with the HSV as a perfect 0 returns 'undefined' in the hsv.a position

My Environment

Expected Behavior:

When using the 'alpha' and 'hue' sliders I expect the hue value to not exceed 360° and the alpha value to not exceed 1.

Actual Behavior:

Hue and alpha values exceed 360° and 1 (respectively), easily reproducible here (try sliding either slider all the way to the right).

My Environment

| Dependency | "react": "^18.2.0",
"react-color-palette": "^6.2.0",
"react-dom": "^18.2.0" |
| --------------------------- | -------- |
| Node.JS version | 16.15.0 |
| react-color-palette version | v6.2.0 |

Expected Behavior:

No error in the import statement

Actual Behavior:

Error in the import statement

Additional Context:

The import statement has the following error:
Could not find a declaration file for module 'react-color-palette'. 'f:/ReactApps/profile-customizer/node_modules/react-color-palette/lib/index.mjs' implicitly has an 'any' type.
There are types at 'f:/ReactApps/profile-customizer/node_modules/react-color-palette/lib/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'react-color-palette' library may need to update its package.json or typings.

Here's my code:
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";

export const ColorInput = () => {
const [color, setColor] = useColor("hex", "#121212");

return (
	<ColorPicker
		width={240}
		height={120}
		color={color}
		onChange={setColor}
		hideHSV
  hideRGB
  hideHEX
	/>
);

};

export default ColorInput;

My Environment

Expected Behavior:

When in a scroll container (or a container that moved), the ColorPicker/Saturation component drag zone match what is on the screen.

Actual Behavior:

When in a scrolled container, the drag zone stay the one we had during the first render.

Additional Context:

The issue can be reproduced using https://codesandbox.io/s/competent-knuth-3mzv7d?file=/src/App.js

The Problem:

Currently need a way to have the color picker be empty (or any transparent value) for hex indicating that it is transparent.

The Solution:

Additional Context:

My Environment

Hello,

I am having an issue with importing the toColor function from the react-color-palette. The error message I am receiving is: Attempted import error: 'toColor' is not exported from 'react-color-palette' (imported as 'toColor').

Additionally, I am also encountering an issue with the width property. The error message I am receiving is: Type error: Type '{ width: number; height: number; color: any; onChange: (color: any) => void; hideHSV: true; hideRGB: true; dark: true; }' is not assignable to type 'IntrinsicAttributes & IColorPickerProps'. Property 'width' does not exist on type 'IntrinsicAttributes & IColorPickerProps'.

Thanks

23:33:33.097 | ./src/hooks/usePhoto.ts
23:33:33.097 | Attempted import error: 'toColor' is not exported from 'react-color-palette' (imported as 'toColor').
23:33:33.097 |  
23:33:33.097 | Import trace for requested module:
23:33:33.097 | ./src/hooks/usePhoto.ts
23:33:33.098 | ./src/hooks/index.ts
23:33:33.098 | ./src/components/ImageCard.tsx
23:33:33.098 |  
23:33:33.098 | - info Linting and checking validity of types...
23:33:36.308 | Failed to compile.
23:33:36.308 |  
23:33:36.308 | ./src/components/ColorPicker.tsx:17:7
23:33:36.308 | Type error: Type '{ width: number; height: number; color: any; onChange: (color: any) => void; hideHSV: true; hideRGB: true; dark: true; }' is not assignable to type 'IntrinsicAttributes & IColorPickerProps'.
23:33:36.308 | Property 'width' does not exist on type 'IntrinsicAttributes & IColorPickerProps'.
23:33:36.309 |  
23:33:36.309 | 15 \|   return (
23:33:36.309 | 16 \|     <RColorPicker
23:33:36.309 | > 17 \|       width={width}
23:33:36.309 | \|       ^
23:33:36.309 | 18 \|       height={190}
23:33:36.309 | 19 \|       color={color}
23:33:36.309 | 20 \|       onChange={setColor}
23:33:36.412 | error Command failed with exit code 1.
23:33:36.414 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
23:33:36.443 | Error: Command "yarn run build" exited with 1

My Environment

Expected Behavior:

Changing the colour in the hex input should call the onChangeComplete callbackfn if the user entered a valid hex value.

Actual Behavior:

Changing the colour in the hex input only calls the onChange callbackfn (even if the value entered is invalid) and not the onChangeComplete callbackfn.

Additional Context:

For my use-case I only wrote this issue for the hex value, but I can imagine the same would apply for the RGB and HSL values.

Good night, some way to get the color once the selection is finished, the color obtained after a few seconds of having stopped changing the color .. I don't know if I explain myself well, sorry I'm a newbie

edit onBlur event

Hi I wanted to use your nice component in a NextJS app but it's not working 😉.

My Environment

Expected Behavior

Working with NextJS 😅

Actual Behavior

Not working with NextJS 😅

https://nextjs.org/docs/messages/css-npm

Idea of solution

Allow to import the ColorPicker without the CSS and the CSS separately. (You can keep the default export with everything 😉)

import { ColorPicker } from 'react-color-palette'
import 'react-color-palette/styles.css'

Hope this can help :)
Thanks for maintaining an open source project!

My Environment

Expected Behavior:

If the props change, the useColor hook should acknowledge that and the setColor function should be called once again to set the initial value according to the changed parameters.

Actual Behavior:

If the initial value passed to the useColor hook changes, like in the case of passing props as initial value. The color does not update i.e. the hex value, the color and the position of the selector remain the same.

My Environment

Heyy 👋
I'm having trouble importing react-color-palette/css as it does not directly point to a css file using esbuild & esbuild-sass-plugin. I noticed that the exports change was made in v7. Could it be possible to expose the real file & its real path in exports?

Many thanks!

Error: Build failed with 1 error:
#10 97.69 ssr/server_rendering.ts:4:7: ERROR: [plugin: sass-plugin] Can't find stylesheet to import.
#10 97.69    ╷
#10 97.69 10 │ @import 'react-color-palette/css';
#10 97.69    │         ^^^^^^^^^^^^^^^^^^^^^^^^^
#10 97.69    ╵
#10 97.69   - 10:9  root stylesheet
#10 97.69     at failureErrorWithLog (/xxx/node_modules/esbuild/lib/main.js:1649:15)
#10 97.69     at /xxx/node_modules/esbuild/lib/main.js:1058:25
#10 97.69     at /xxx/node_modules/esbuild/lib/main.js:1525:9
#10 97.69     at processTicksAndRejections (node:internal/process/task_queues:95:5) {
#10 97.69   errors: [
#10 97.69     {
#10 97.69       detail: undefined,
#10 97.69       id: '',
#10 97.69       location: [Object],
#10 97.69       notes: [],
#10 97.69       pluginName: 'sass-plugin',
#10 97.69       text: "Can't find stylesheet to import.\n" +
#10 97.69         '   ╷\n' +
#10 97.69         "10 │ @import 'react-color-palette/css';\n" +
#10 97.69         '   │         ^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
#10 97.69         '   ╵\n' +
#10 97.69         '  - 10:9  root stylesheet'
#10 97.69     }
#10 97.69   ],
#10 97.69   warnings: []
#10 97.69 }

How can i apply max width and max height?
i tried to apply through css like this to the rcp class

.rcp {
    width: 100% !important;
    height: 100% !important; 
    border-radius: 0 !important;
}.

when i apply above css, i start getting hex values with dashes (#d5-40-40).

My Environment

Expected Behavior:

The maximum value should not depend on padding/margin that is potentially changed.

Actual Behavior:

The slider exceeds the maximum value when the vertical padding is removed. This will change "break" the maximum value:

.rcp-body {
  padding-left: 0;
  padding-right: 0;
}

This is my implementation of the component were the padding is adjusted:

Additional Context:

This ticket is a follow up from #23 (comment). Turns out there is a different reason why the maximum value was not working yet for me.

Workaround:

Don't adjust the padding that are given for now.