11 ms·
React Color – Color Pickers from Sketch, Photoshop, Chrome and More
- thedaemon 11y agoIt's missing my personal favorite the triangle or sometimes called color wheel.
- casesandberg 11y agoAny particular rendition of it you like? I can put one together today!
- Twinklebear 11y agoThis 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.
- casesandberg 11y agoYeah, you totally can! It's all front-end with React and Webpack. You can use Webpack in development and just have it build the static html and js files for gh-pages. Thats how the documentation site is built :)
- ClayM 11y agoYes, 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 11y agoGreat! I'll go check out some React tutorials.
- TN1ck 11y agoI think you are searching for something like dat.GUI [1], most WebGL-demos are using it. [1] http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage http://workshop.chromeexperiments.com/examples/gui/#1--Basic...
- mshenfield 11y agoWow! 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.
- vezzy-fnord 11y agocould be very very wrong You are.
- mshenfield 11y agoFair enough. Should do more research before I spout such broad statements on HN.
- NathanCH 11y agoIn fairness, you did say '[that] I've ever come across'. Your comment is not incorrect.
- awinder 11y agoThere'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 11y agoAppreciate the links, thanks!
- ygra 11y agoPretty, 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.
- sktrdie 11y agoCool but it still lags :( Wasn't ReactJS suppose to be quicker because of Virtual DOM or something?
- watty 11y agoQuicker than what? And a framework choice doesn't guarantee a certain level of responsiveness, it also comes down to the implementation.
- jarek-foksa 11y agoOne 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-what/ https://aerotwist.com/blog/react-plus-performance-equals-wha...
- clessg 11y agoThat 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.
- JDDunn9 11y agoIf by discredited you mean lots of React fanboys whined about it then yes. If you mean anyone showed actual evidence to the contrary, then no.
- clessg 11y agoCall people fanboys all you want, but after the code was released, numerous glaring issues were found, and still haven't been addressed.
- xorcist 11y agoAs 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.
- dbbolton 11y agoI'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 11y agoIt's on the list for me to build! https://github.com/casesandberg/react-color/issues/6 https://github.com/casesandberg/react-color/issues/6
- JDDunn9 11y agoLooks really great. Why the React dependency though? Would be more flexible, faster, and avoid dependency hell if it was vanilla JS.
- tajano 11y agoBecause React's cool for the next five minutes, and now we need to re-implement everything in React.
- ultrafez 11y ago"dependency hell" is a bit of an exaggeration. It has one dependency.
- JDDunn9 11y agoDependency 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)
- andrewingram 11y agoIn fairness. The vast majority of the code in this library is describing the UI, and event handlers, which is exactly what React is used for. It's not like there's a ton of non-React code in here that could be abstracted out into a separate library.
- drinchev 11y agoLooks 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.
- clessg 11y agoSee Michael Chan's presentation: https://www.youtube.com/watch?v=ERB1TJBn32c https://www.youtube.com/watch?v=ERB1TJBn32c
- graffitici 11y agoIt's becoming more and more common. Check this out: http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html http://blog.vjeux.com/2014/javascript/react-css-in-js-nation...
- jaen 11y agohttp://keithjgrant.com/posts/against-css-in-js.html http://keithjgrant.com/posts/against-css-in-js.html
- kylecesmat 11y agoIt works in some cases as a pattern of keeping components very modular and only loading the styles on the page that a single component needs. And I think it works well in cases where a component is very unique and wouldn't share any styles with other components. That said, I personally see it as an anti-pattern. Styles should be kept agnostic of application logic for the most part. Practicing proper BEM convention paired with proper organization of SASS files yields simple management of style logic. This works exceptionally well in complex applications. There are two camps forming right now with different methodologies & use-cases in each, and it will be interesting to see which patterns are implemented & what kind of 'css in js' tools become available.
- 11y ago
- ts330 11y agoEvery 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 11y agoIn 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.
- look_lookatme 11y agoDoesn't support opacity, but this one does now.
- jawngee 11y agoDoesn't work on Safari either. http://caniuse.com/#feat=input-color http://caniuse.com/#feat=input-color
- tinco 11y ago> All we're doing here is creating projects for those with time on their hands I bet this guy learned a ton and has a nice widget on his resume. > frustrating those with none The idea is that they gained some advantage from chosing the latest and greatest framework. If that's not worth having to make a widget like this yourself, then you should've chosen old reliable instead.
- deleted 11y ago[deleted]
- smaili 11y agoReally slick but would be great if there was a browser compatibility listed somewhere.
- markthethomas 11y agoThis 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!
- ademup 11y agoVery 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 11y agoThank 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
- casesandberg 11y agoThis was fixed in 1.0.5, thanks :D
- webosb 11y agodoes this work with react 0.14?
- stevejohnson 11y agoI'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 11y agoThanks 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 11y agoYou'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 11y agoSweet! 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!
- TeeWEE 11y agoTry 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 11y agohttps://github.com/casesandberg/react-color/issues/13 https://github.com/casesandberg/react-color/issues/13
- KiaFathi 11y agoThe 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 11y agoThanks! 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 11y agoReally cool, look forward to it!