
React Color – Color Pickers from Sketch, Photoshop, Chrome and More - casesandberg
http://casesandberg.github.io/react-color/
======
ts330
Every time someone invents another framework, 1000s of hours are lost to
rewriting these widgets - colour pickers, date pickers, drop-downs, combo-
boxes etc etc. And that's before people complain about lack of flexibility and
all the missing features their predecessors have accrued over time. More
wasted time as people try to get to grips with yet another style of
configuration, operation and tweaking to fit real world use cases.

I'm all for innovation and advancing the state of the art, but there has got
to be a better way of dealing with these basic components. All we're doing
here is creating projects for those with time on their hands, frustrating
those with none, and keeping StackOverflow in business.

~~~
jewel
In this particular case, the HTML5 <input type=color> works great. (Not on IE
yet, but there is a polyfill.)

In the long run, shadow DOM should make it easier to make framework agnostic
widgets.

~~~
jawngee
Doesn't work on Safari either.

[http://caniuse.com/#feat=input-color](http://caniuse.com/#feat=input-color)

------
drinchev
Looks awesome. Kudos.

I'm not a React specialist and I have the following question : Is it that
common to write the CSS inside the JSX file?

Since I started learning React, the hardest part to swallow was that my HTML
and JS now live in the same file. Now I see that this library also puts the
CSS and since I'm not entirely sure if this is good or not, can someone point
some Pro's and Cons and if it's common or not.

~~~
graffitici
It's becoming more and more common. Check this out:

[http://blog.vjeux.com/2014/javascript/react-css-in-js-
nation...](http://blog.vjeux.com/2014/javascript/react-css-in-js-
nationjs.html)

~~~
jaen
[http://keithjgrant.com/posts/against-css-in-
js.html](http://keithjgrant.com/posts/against-css-in-js.html)

------
TeeWEE
Try dragging within the colorpicker rainbow sections... Its super slow, for
every drag event React-engine will perform a diff on the domtree.... This is
not the way to implement such components. React is nice for non-continuous dom
updates. But it will be never quicker than drawing to the screen yourselve, or
updating the components yourselve... Its a lot faster than diffing a tree
every few milliseconds.

~~~
TeeWEE
[https://github.com/casesandberg/react-
color/issues/13](https://github.com/casesandberg/react-color/issues/13)

------
stevejohnson
I've tried half a dozen libraries to solve this problem for Literally Canvas
([http://literallycanvas.com](http://literallycanvas.com)). They all have one
or more dealbreakers. In this case, it's superficially that the controls are
too close together to be touch-friendly. But it looks really extensible and
easy to change, so I'll give it a shot anyhow. Thanks!

~~~
casesandberg
Thanks Steve!

If you know of a color-picker design that is better spaced (mobile friendly)
go ahead and open up a issue on the repo and paste it in there. I am going to
be going through this week and making a couple more!

~~~
stevejohnson
You'll see a pull request from me soon. I'd much rather contribute than write
my own from scratch, as I had planned to do before I saw this.

Edit: to elaborate, the layouts are generally fine, you just need fatter
sliders and more space between the buttons.

~~~
casesandberg
Sweet! Yeah, let me know if you have any questions about the helper components
as well, its the first time I have done something like that!

------
sktrdie
Cool but it still lags :( Wasn't ReactJS suppose to be quicker because of
Virtual DOM or something?

~~~
watty
Quicker than what? And a framework choice doesn't guarantee a certain level of
responsiveness, it also comes down to the implementation.

~~~
jarek-foksa
One of the primary selling points of React is better performance of the
virtual DOM, which apparently has no prove in benchmarks [1].

[1] [https://aerotwist.com/blog/react-plus-performance-equals-
wha...](https://aerotwist.com/blog/react-plus-performance-equals-what/)

~~~
clessg
That article has been discredited pretty thoroughly.

Anyway, it's not a panacea. It can't do much if you're forcing a reflow every
few milliseconds.

~~~
xorcist
As a complete outsider, do you have a link or two to support that so I could
learn more?

It would seem to me, again completely without knowledge, that a virtual DOM
seems suboptimal. Web browsers should be able to optimize for that use case a
lot better.

~~~
clessg
Pete Hunt's talk is good.
[https://youtu.be/x7cQ3mrcKaY?t=1112](https://youtu.be/x7cQ3mrcKaY?t=1112) I'd
recommend watching the entire video if you have time, but that's the gist of
it. More detail:

[http://stackoverflow.com/questions/21109361/why-is-reacts-
co...](http://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-
virtual-dom-said-to-be-more-performant-than-dirty-mode)

It is challenging to make a large app with lots of state be performant when
you manually mutate the DOM, and there's no way for the browser to fix that
because of the way things work.

For example, if you move an element, and then request the position of another
element immediately after, the browser will be forced to recalculate layout
before giving you an answer. With lots of state and lots of updates, it's very
challenging to keep this in the right order.

As virtual DOM is an abstraction over the DOM, you can make a vanilla app that
is much faster, but as your app grows, that quickly reverses.

~~~
jarek-foksa
Shadow DOM will allow browsers to optimise their rendering code to re-render
encapsulated DOM subtrees independently of each other.

Virtual DOM makes sense when (A) you have a huge tree and (B) you show only a
small portion of that tree to the user at any given time.

For example a long scrollable list or a multi-line text editor would be better
implemented with virtual DOM, but using it everywhere is an overkill.

------
ygra
Pretty, although I found a few issues:

The Sketch colour picker in the second sample in More Examples has no alpha,
yet displays an editable field for it. Furthermore, while a text box for the
colour component has focus, dragging of the label below it changes the colour,
but not the value in the text box. And I think for all "dialog-like" colour
pickers the text box labels should actually be labels for the text box, that
is, when clicked, they should put focus on the text box.

------
ademup
Very nice work. Sincerely, thank you for the writeup! I'm still trying to
gauge whether React is good for me or not, and this is very readable :)

I noticed that it is trivial to break the whole thing in a way that would
probably put off average users. (See Bug Report at bottom.)

I would like to read ideas here that weigh the merits of Web Components and
other compartmentalized (web) programming techniques and their ability to
still have the ability to fail globally, especially if they promote an
environment that gives the (perhaps false) notion that 'What I do in this will
not be a problem for you'. Is this a function of React(and similar), the
programmer, or other? Is it even a thing at all?

Bug Report: Changing an integer value to "g" in the R field of "Sketch" breaks
ALL widgets with the only apparent way of fixing is clicking a swatch or
entering a valid hex where available. Clicking Up or Down arrows in 'Chrome'
does not fix. Clicking in color areas of 'Chrome', 'Sketch', or 'Photoshop'
does not fix. Inputting Valid RGB values into any field does not fix but
reverts to NAN.

~~~
casesandberg
Thank you so much for the bug report! There are so many edge cases, I cant
believe I didnt even catch this one -- being so basic. I have created a github
issue for it and hope to fix this tonight!

[https://github.com/casesandberg/react-
color/issues/11](https://github.com/casesandberg/react-color/issues/11)

------
thedaemon
It's missing my personal favorite the triangle or sometimes called color
wheel.

~~~
casesandberg
Any particular rendition of it you like? I can put one together today!

~~~
thedaemon
GTK Color Wheel actually. It's the one with a triangle in the middle. User
dbbolton suggested it and it looks like it's on your list.

------
dbbolton
I'd love to see a GTK-style version, i.e. a hue wheel with a S/L triangle like
this: [http://i.imgur.com/yscI9Iy.png](http://i.imgur.com/yscI9Iy.png)

~~~
casesandberg
It's on the list for me to build!

[https://github.com/casesandberg/react-
color/issues/6](https://github.com/casesandberg/react-color/issues/6)

------
markthethomas
This looks awesome; the color pickers I've seen for react so far are either
really minimally complete or too rigid. Nice to have a solid one to
reference/use if I need it. Thanks for your work on this!

------
Twinklebear
This is really cool! Sorry if this is kind of a dumb question but I know
nothing about web development: can I use this without running node on the
server? I'd like to use this for a WebGL distance field renderer I'm working
on but host things on my Github page and thus can only do client side stuff.
Getting a server is a possibility but for just one tiny project it doesn't
seem worth it.

~~~
ClayM
Yes, you can absolutely run React components without the use of a server. You
can edit an html file locally and put a react component in there. That's
usually the first thing most React tutorials have you do.

If you're using a backend server you're just rendering the react stuff to html
and sending it to the client.

~~~
Twinklebear
Great! I'll go check out some React tutorials.

------
KiaFathi
The documentation is awesome, I noticed it is pretty similar to React-CSS's
documentation. Is that the original source of this documentation style or is
there some library I can use for my own personal project?

~~~
casesandberg
Thanks! I built it originally for `reactcss` but have used it on 3 projects
now. I am going to be releasing it at the end of next month with a nice
writeup!

~~~
KiaFathi
Really cool, look forward to it!

------
mshenfield
Wow! I feel like this is one of the first packaged widgets I've ever come
across (could be very very wrong). Great example of how React and web
components will make the future of the web more awesome.

~~~
awinder
There's some good widget collections out there:

    
    
      * http://material-ui.com/#/components/appbar
      * http://react-bootstrap.github.io/components.html
    

And for more single-use components, theres [http://react-
components.com/](http://react-components.com/)

~~~
mshenfield
Appreciate the links, thanks!

------
JDDunn9
Looks really great. Why the React dependency though? Would be more flexible,
faster, and avoid dependency hell if it was vanilla JS.

~~~
ultrafez
"dependency hell" is a bit of an exaggeration. It has one dependency.

~~~
JDDunn9
Dependency hell is from when multiple components depend on the same framework,
but work with different versions. Since React is pre 1.0, you can expect the
API to change a bit. If you build an app with multiple React components, you'd
better hope all of them are well maintained, or you'll break some scripts when
upgrading React (which you'll need to do for other scripts' bug fixes)

------
smaili
Really slick but would be great if there was a browser compatibility listed
somewhere.

------
webosb
does this work with react 0.14?

