gulp-react-docs

A gulp plugin for generating documentation in Markdown format for React components based on their propTypes. The plugin uses react-docgen to extract component prop information, and then render the markdown using handlebars.

This plugin is an extension of the automatic documentation generation tool we use at AdRoll for our reusable component library as written about here.

Installation

Install package with npm and add it to your development dependencies:

npm install gulp-react-docs --save-dev

Information

Package	gulp-react-docs
Description	Generates Markdown documentation for React components based on component `propTypes`.
Node Version	>= 10

Usage

var gulpReactDocs = require('gulp-react-docs');

gulp.task('react-docs', function() {
    var docsDest = 'docs';

    return gulp.src('./components/**/*.jsx')
        .pipe(gulpReactDocs({
            path: docsDest
        }))
        .pipe(gulp.dest(docsDest));
});

For example usage, see our example gulpfile.js here.

For example output, see the generated docs example/docs generated from the files in example/components.

Options

The gulp-react-docs plugin can take an options object. The following attributes may be passed as part of the options object:

path

Type: string OR function
Default: undefined

The path specifying the destination directory for your generated documentation files. This option is used to generate links from the output .md files to the source code. See the link produced below the heading here for an example. If this option is not given, the link to the source code will not be generated. The path can be either a string or a function.

If you pass in a string, path should be the relative path from the gulpfile.js using the gulp-react-docs plugin to where the generated documentation will be output. The path will then be used to generate the relative path from the output documentation to the source code.

If you pass in a function, path is expected to return a string. The return value can be either a relative from where the generated documentation will be output to the source code, or an absolute path / URL pointing to the source code.