A Color style guide in React

React Live Color Guide

Demo&Code

This is a live styleguide for colors implemented with React.js.

Colors, specified in hex, rgb or hsl, are read from a JSON file and then displayed arranged in a responsive (Flexbox) grid of color swatches.
Each swatch is rendererd as a card with a sample of the color and then a list of its css color formats(hex, rgb, hsl), auto computed with Tinycolor.
Each color code can be copied to the clipboard with just a click thanks to Clipboard.js .
A Css animation is used to notify the user when the color has been copied to the clipboard.

Issues: on Firefox 40.0.2 copy-to-clipboard doesn’t work and on IE 10 there are some rendering problems. I’m not going to check these bugs now, this was just a quick exercise.

Advertisements