react-styleguide-generator
Advanced tools
Easily generate a good-looking styleguide by adding some documentation to your React project
Easily generate a good-looking styleguide by adding some documentation to your React project.
Demo using the React-Bootstrap.
npm install react-styleguide-generator
Which requires React 0.13.0 or newer. To install it npm install react.
Create file for the styleguide, and then add some documentation to a static field named styleguide. You can use the ES6 syntax by Babel.
NOTE: By default Babel's static keyword is disabled. You can turn them on individually by passing stage 0 as a babelrc or options.babelConfig.
import React from 'react'
import Button from './Button'
export default class extends React.Component {
static styleguide = {
index: '1.1',
category: 'Elements',
title: 'Button',
description: 'You can use **Markdown** within this `description` field.',
code: `<Button size='small|large' onClick={Function}>Cool Button</Button>`,
className: 'apply the css class'
}
onClick () {
alert('Alo!')
}
render () {
return (
<Button size='large' onClick={this.onClick}>Cool Button</Button>
)
}
}
index: Reference to the element's position in the styleguide (optional)category: Components category nametitle: Components titledescription: Components description (optional)code: Code examples (optional)className: CSS class name (optional)If necessary, visit react-styleguide-generator/example to see more complete examples for the documenting syntax.
A common usage example is below.
# The default output to `styleguide` directory
rsg 'example/**/*.js'
Type rsg -h or rsg --help to get all the available options.
Usage: rsg [input] [options]
Options:
-o, --output Output directory ['styleguide']
-t, --title Used as a page title ['Style Guide']
-r, --root Set the root path ['.']
-f, --files Inject references to files ['']
-c, --config Use the config file ['styleguide.json']
-p, --pushstate Enable HTML5 pushState [false]
-v, --verbose Verbose output [false]
Examples:
rsg 'example/**/*.js' -t 'Great Style Guide' -f 'a.css, a.js'
var gulp = require('gulp')
var RSG = require('react-styleguide-generator')
gulp.task('styleguide', function (done) {
var rsg = RSG('example/**/*.js', {
output: 'path/to/dir',
files: ['a.css', 'a.js']
})
rsg.generate(function (err) {
if (err) {
console.error(String(err))
}
done()
})
})
Returns a new RSG instance.
Type: String
Refers to glob syntax or it can be a direct file path.
Type: String
Default: 'styleguide'
Output directory path.
Type: String
Default: 'Style Guide'
Used as a page title and in the page header.
Type: String
Default: '.'
Set the root path. For example, if the styleguide is hosted at http://example.com/styleguide the options.root should be styleguide.
Type: Array
Default: null
Inject references to files. A usage example is:
{
files: [
'//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css',
'a.css',
'a.js',
'icon.svg'
]
}
Check for the existence of the files and only copy the files if it exists.
styleguide/files
├─ a.css
├─ a.js
└─ icon.svg
Inject file references into index.html if the files with the extension .css or .js.
<!doctype html>
<html>
<head>
…
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="files/a.css">
</head>
<body>
…
<script src="files/a.js"></script>
</body>
</html>
Type: String
Default: styleguide.json
The entire range of RSG API options is allowed. Usage example.
Type: String
Default: false
Enable HTML5 pushState. When this option is enabled, styleguide will use history API.
Type: Object
Default: null
A usage example is below. See the babel docs for the complete list.
{
babelConfig: {
stage: 0
}
}
Generate the files and their dependencies into a styleguide output.
Get the demo running locally:
git clone git@github.com:pocotan001/react-styleguide-generator.git
cd react-styleguide-generator/example/
npm install
npm start
Visit http://localhost:3000/ in your browser.
FAQs
Easily generate a good-looking styleguide by adding some documentation to your React project
We found that react-styleguide-generator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub postponed a new billing model for self-hosted Actions after developer pushback, but moved forward with hosted runner price cuts on January 1.
Research
Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.
Security News
Socket CTO Ahmad Nassri shares practical AI coding techniques, tools, and team workflows, plus what still feels noisy and why shipping remains human-led.