Skip to content

Instantly share code, notes, and snippets.

@iest
Last active August 29, 2015 14:10
Show Gist options
  • Save iest/9f606393bfbb8eab0e43 to your computer and use it in GitHub Desktop.
Save iest/9f606393bfbb8eab0e43 to your computer and use it in GitHub Desktop.
Another reason why React is awesome: render components directly inside your style guide, passing in props
gulp.task('styleguide', ['build'], function() {
var React = require('react');
require('node-jsx').install();
var p = require('path');
var components = {};
// This is the important bit
var normalizedPath = p.join(__dirname, "src/components/");
require("fs").readdirSync(normalizedPath)
.filter(function(path) {
return p.extname(path) === '.js' || p.extname(path) === '.jsx';
})
.forEach(function(path) {
var name = p.basename(path, p.extname(path));
var component = require(p.join(normalizedPath, path));
components[name] = React.createFactory(component);
});
var app = express();
app.use(express.static(__dirname + '/dist'));
app.set('views', __dirname + '/styleguide');
app.set('view engine', 'jade');
app.engine('jade', require('jade').__express);
app.get('/', function(req, res) {
res.render('index', {
React: React,
components: components, // <- and this bit here
dummy: React.createElement('span', null, 'Dummy content')
});
});
app.listen(8181);
console.log('Styleguide started on port 8181');
gulp.watch(paths.allStyles, ['stylus']);
gulp.watch(paths.svg, ['svg']);
});
h2.sg Input
.sg-example
!= React.renderComponentToString(components.Input({type: "text", label: "Input", id: "test"}))
!= React.renderComponentToString(components.Input({type: "text", label: "Input", id: "test", value:"Test input"}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment