Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Use ReactJS to create style guide
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>
);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment