elrumordelaluz / coloreact Goto Github PK

Hi,

I wanted to send a pull request for #6. But I can't get coloreact to build.

• I clone the repo.
• I run npm install
• If I then run npm run start I get the following error:

ERROR in bundle.js from UglifyJs
Unexpected token: name (urlParts) [bundle.js:4622,4]
webpack: Failed to compile.

I tried with nodejs version 8, 10, and 12, without luck. Can anyone reproduce the issue?

Hi there, thanks for sharing this. I love this package, because it allows me to customize every bit quite easily.

There is one thing I've noticed for the default Hue Pickers: The yellow sections is rather small, so it's difficult to pick a pure yellow.

The current Slider uses this:

#FF0000 0%,
#FF0099 10%,
#CD00FF 20%,
#3200FF 30%,
#0066FF 40%,
#00FFFD 50%,
#00FF66 60%,
#35FF00 70%,
#CDFF00 80%,
#FF9900 90%,
#FF0000 100%

I think these values work a little nicer (taken from here: https://github.com/casesandberg/react-color/blob/master/src/components/common/Hue.js)

#f00 0%, 
#ff0 17%, 
#0f0 33%,
#0ff 50%, 
#00f 67%, 
#f0f 83%, 
#f00 100%

I'd suggest using those for the default pickers.

Cheers! :-)

Because we get npm errors 🤔
https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-project
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"~17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.6.1 || ^16.0.0" from [email protected]
npm ERR! node_modules/coloreact
npm ERR!   coloreact@"~0.3.1" 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.

See:

• React 16 to 17: https://reactjs.org/blog/2020/10/20/react-v17.html
• React 17 to 18: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

Hey mate,

I'm trying to install this via NPM but it seems the /lib folder is missing.

Your package.json references "main": "lib/index.js",

but when viewing the installed folder within node_modules/coloreact only docs, examples, node_modules and src are present.

The default hue slider is currently looking like this (rough discrete overview):

Red
Orange
Yellow
Green
Light Blue
Blue
Purple
Pink
Red

If you bring up the demo and move the hue slider to the green section, the main panel is in shades of blue.

Red
Orange
Yellow
Green <--- Move slider cursor here
Light Blue
Blue <--- Color of the panel
Purple
Pink
Red

If you move the hue slider to the blue section, the main panel is in shades of green.

Red
Orange
Yellow
Green <--- Color of the panel
Light Blue
Blue <--- Move slider cursor here
Purple
Pink
Red

As you go further up or down the hue slider, the main panel color is actually the mirror color of what you actually select on the hue slider, as though the vertical color spectrum has been flipped.

Hi guys,

Can we move the opacity slider to the same place where the hue slider is?

Hey.

I stumbled across your project and noticed that it is a derivative of my color picker for react, which itself was a derivative of this other colorpicker for react.

In case you weren't aware, the MIT license - which both of those projects are licensed under - requires that you preserve the original copyright notice. You are free to fork, modify etc the code subject to that one condition.

As such, it would be cool if you could add appropriate attribution to @stayradiated and myself. Not sure whether the ISC license (which you list in package.json) is compatible with MIT, so you may want to investigate that or revert simply back to MIT.

Hi, I am using your component, and I found an issue in ColorPicker class on this function:

  output () {
    const c = tinycolor(this.state.color);
    return {
      hsl: c.toHsl(),
      hex: c.toHex(),
      hexString: c.toHexString(),
      rgb: c.toRgb(),
      rgbString: c.toRgbString(),
    }
    return c;
}

Could you please, remove the second return, so I can use it alongside TypeScript?
Thank you.