React Color Guide

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.

Dependencies

React.

var  
   React = require('react')
   ,ColorGuide = require('./ColorGuide')
   colorSchemes = require('./colorSchemes')
;

var StyleGuide = React.createClass({

   render: function() {
      var colorGuides = colorSchemes.map(cs =>
         <section className="color-guide" key={cs.name}>
            <h2 className="title">{cs.name}</h2>
            <ColorGuide colors={cs.colors} />
         </section>
      );

      return (
         <div className="page-wrap">
            {colorGuides}
         </div>
      );
   }

});

module.exports = StyleGuide;