Use ReactJS to create style guide

styleguide.jsx

var React = require('react');
var beautify = require('js-beautify').html


var StyleBlock = React.createClass({
  render: function () {

    var Element = this.props.element

    return (
      <div>
        <div className="style-name">
          <h3>
            {this.props.name} &nbsp;
            {
              this.props.filepath ?
               <small className="">file path: {this.props.filepath}</small> : ''
            }
          </h3>
          {this.props.children}
        </div>
        <div  className="style-block">
        <div className="style-example">
          <Element />
        </div>
        <div className="style-code">


          <pre className="language-markup">
          <code className="language-markup">
            { beautify( React.renderToStaticMarkup(<Element />), { indent_size: 2, unformatted: ['button'] }) }
          </code>
          </pre>
        </div>
        </div>
      </div>

    );
  }
})