Security News
CISA Brings KEV Data to GitHub
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
By Sarah Gooding - Jan 29, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-styleguide-generator
Advanced tools
react-styleguide-generator
Easily generate a good-looking styleguide by adding some documentation to your React project
React Styleguide Generator
Easily generate a good-looking styleguide by adding some documentation to your React project.
Demo using the React-Bootstrap.
Installation
npm install react-styleguide-generator
Which requires React 0.13.0 or newer. To install it npm install react.
Quick Start
Documenting your React components
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.
Generating the documentation
Command line tool
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'
Gulp
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()
})
})
API
RSG(input, [options])
Returns a new RSG instance.
input
Type: String
Refers to glob syntax or it can be a direct file path.
options
output
Type: String
Default: 'styleguide'
Output directory path.
title
Type: String
Default: 'Style Guide'
Used as a page title and in the page header.
root
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.
files
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>
config
Type: String
Default: styleguide.json
The entire range of RSG API options is allowed. Usage example.
pushstate
Type: String
Default: false
Enable HTML5 pushState. When this option is enabled, styleguide will use history API.
babelConfig
Type: Object
Default: null
A usage example is below. See the babel docs for the complete list.
{
babelConfig: {
stage: 0
}
}
rsg.generate([callback])
Generate the files and their dependencies into a styleguide output.
Demo
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
The npm package react-styleguide-generator receives a total of 34 weekly downloads. As such, react-styleguide-generator popularity was classified as not popular.
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.
Package last updated on 26 Jun 2015
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.
Related posts
Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
By Sarah Gooding - Jan 28, 2025
Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
By Sarah Gooding - Jan 24, 2025