wondermarin / react-color-palette Goto Github PK
View Code? Open in Web Editor NEW๐จ Lightweight Color Picker component for React.
Home Page: https://codesandbox.io/s/react-color-palette-2zw8q
License: MIT License
๐จ Lightweight Color Picker component for React.
Home Page: https://codesandbox.io/s/react-color-palette-2zw8q
License: MIT License
Dependency | Version |
---|---|
react-color-palette version | v6.1.0 |
useColor
can accept a rgb or hsv initial color as documented
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.
Reproduced in this sandbox:
https://codesandbox.io/s/react-color-palette-infinite-loop-lzk0e?file=/src/App.tsx
| 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 |
No error in the import statement
Error in the import statement
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;
Dependency | Version |
---|---|
Node.JS version | v20.5.0 |
react-color-palette version | v7.0.2 |
I can move/resize the component that contains the ColorPicker without any issues.
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 ).
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
No support on touch screens
Add support for touches
Are we having the feature of opacity slider ???
Dependency | Version |
---|---|
Node.JS version | v20.5.0 |
react-color-palette version | v7.0.3 |
When in a scroll container (or a container that moved), the ColorPicker/Saturation component drag zone match what is on the screen.
When in a scrolled container, the drag zone stay the one we had during the first render.
The issue can be reproduced using https://codesandbox.io/s/competent-knuth-3mzv7d?file=/src/App.js
Dependency | Version |
---|---|
Node.JS version | v18.12.1 |
react-color-palette version | v7.0.2 |
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
Dependency | Version |
---|---|
Node.JS version | v18.17.0 |
react-color-palette version | v7.1.0 |
@testing-library/jest-dom version | v5.17.0 |
jest-canvas-mock version | v2.5.2 |
jest-junit version | v15.0.0 |
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.
The test fails with the error message mentioned in the title of the request on the row with useColor initialization hook.
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.
Currently need a way to have the color picker be empty (or any transparent value) for hex indicating that it is transparent.
Dependency | Version |
---|---|
Node.JS version | vX.Y.Z |
react-color-palette version | vX.Y.Z |
according to the documentation:
hideHSV | bool | false | Hide HSV input.
example given:
The hideHSV prop does not work; hideHSB does work:
react-color-palette/src/components/ColorPicker.component.tsx line 14
Great library, thank you!
Hi I wanted to use your nice component in a NextJS app but it's not working ๐.
Dependency | Version |
---|---|
Node.JS version | v14.15.4 |
NextJS version | v10.1.2 |
react-color-palette version | v3.1.0 |
Working with NextJS ๐
Not working with NextJS ๐
https://nextjs.org/docs/messages/css-npm
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!
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
so if you can add min/max height/width or some responsive feature, will make this library great.
Add any other context about the feature request here.
Please give an option to setColor using a custom input feild of my choice
I would like to add a more following function in to the app:
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.
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.
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]
Dependency | Version |
---|---|
Node.JS version | v16.4.0 |
react-color-palette version | v6.2.0 |
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.
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.
MacOS 11.6 (2017 15-inch)
2.8ghz Quad-Core Intel Code i7
Radeon Pro 555 2GB / Intel HD 630 1536 MB
Dependency | Version |
---|---|
Node.JS version | v10.24.1 |
react-color-palette version | v6.1.0 |
The slider should be at the zero position for an 8 character hex, i.e. #12345600
Slider resets to full position when alpha channel set to 0 via hex
Appears to be an issue with the HSV as a perfect 0 returns 'undefined' in the hsv.a position
Dependency | Version |
---|---|
Node.JS version | v14.19.1 |
react-color-palette version | v6.1.0 |
onChangeComplete
should be invoked after HEX color code input change
onChangeComplete
doesn't get invoked
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).
Dependency | Version |
---|---|
Node.JS version | v16.13.2 |
react-color-palette version | v6.2.0 |
Changing the colour in the hex input should call the onChangeComplete callbackfn if the user entered a valid hex value.
Changing the colour in the hex input only calls the onChange callbackfn (even if the value entered is invalid) and not the onChangeComplete callbackfn.
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.
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.
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.
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.
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);
}}
/>
}
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
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.
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.
Dependency | Version |
---|---|
Node.JS version | v18.17.1 |
react-color-palette version | v7.1.0 |
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.
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
}
do we have the option to add
Dependency | Version |
---|---|
Node.JS version | v18.9.1 |
react-color-palette version | v7.0.0 |
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 }
Found this useful package and I'm having issues downloading it to work in my React version v16.13.1
Dependency | Version |
---|---|
React version | v16.13.1 |
Node.JS version | v14.16.1 |
react-color-palette version | v4.1.0 |
To support React version 16 and above
`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`
Users are unable to modify the alpha channel / opacity of colors.
Add alpha channel / opacity slider.
Awesome work. Just wondering if you plan to implement an alpha channel slider or anything similar.
Dependency | Version |
---|---|
Node.JS version | v12.22.0 |
react-color-palette version | ^6.1.0 |
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
When opening the palette, the cursor is at the bottom left of the color picker (#000000 position)
Dependency | Version |
---|---|
Node.JS version | v16 |
react-color-palette version | v6.2.0 |
Codesandbox.io | https://codesandbox.io/embed/spring-waterfall-v2673 |
The maximum value should not depend on padding/margin that is potentially changed.
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:
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.
Don't adjust the padding that are given for now.
Dependency | Version |
---|---|
Node.JS version | 12.4.0 |
react-color-palette version | v6.1.0 |
When using the 'alpha' and 'hue' sliders I expect the hue value to not exceed 360ยฐ and the alpha value to not exceed 1.
Hue and alpha values exceed 360ยฐ and 1 (respectively), easily reproducible here (try sliding either slider all the way to the right).
Dependency | Version |
---|---|
react | 16.8.6 |
react-color-palette | 5.0.0 |
Hue bar allows correct selection of hue even with hideHSB
enabled
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 = )
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.