react-docgen 
react-docgen is a CLI and toolbox to help extracting information from [React][] components, and generate documentation from it.
It uses [ast-types][] and [@babel/parser][] to parse the source into an AST and provides methods to process this AST to extract the desired information. The output / return value is a JSON blob / JavaScript object.
It provides a default implementation for React components defined via
React.createClass, [ES2015 class definitions][classes] or functions
(stateless components). These component definitions must follow certain
guidelines in order to be analyzable (see below for more info).
react-docgen is a low level tool to extract information about react components. If you are searching for a more high level styleguide with nice interface try react-styleguidist or any of the other tools listed in the wiki.
Install
Install the module with yarn or npm:
yarn add react-docgen --dev
npm install --save-dev react-docgen
CLI
Installing the module adds a react-docgen executable which allows you to convert
a single file, multiple files or an input stream. We are trying to make the
executable as versatile as possible so that it can be integrated into many
workflows.
Usage: react-docgen [path]... [options]
path A component file or directory. If no path is provided it reads from stdin.
Options:
-o FILE, --out FILE store extracted information in FILE
--pretty pretty print JSON
-x, --extension File extensions to consider. Repeat to define multiple extensions. Default: [js,jsx]
-e, --exclude Filename pattern to exclude. Default: []
-i, --ignore Folders to ignore. Default: [node_modules,__tests__,__mocks__]
--resolver RESOLVER Resolver name (findAllComponentDefinitions, findExportedComponentDefinition) or
path to a module that exports a resolver. [findExportedComponentDefinition]
Extract meta information from React components.
If a directory is passed, it is recursively traversed.
By default, react-docgen will look for the exported component created through
React.createClass, a class definition or a function (stateless component) in
each file. You can change that behavior with the --resolver option, which
either expects the name of a built-in resolver or a path to JavaScript module
exporting a resolver function. Have a look below for more information about
resolvers.
Have a look at example/ for an example of how to use the result to generate a
markdown version of the documentation.
react-docgen will look for a babel configuration and use it if available. If no config file is found
it will fallback to a default configuration, enabling all syntax extension of the babel-parser.
API
The tool can be used programmatically to extract component information and customize the extraction process:
var reactDocs = require('react-docgen');
var componentInfo = reactDocs.parse(src);
As with the CLI, this will look for the exported component created through React.createClass or a class definition in the provided source. The whole process of analyzing the source code is separated into two parts:
- Locating/finding the nodes in the AST which define the component
- Extracting information from those nodes
parse accepts more arguments with which this behavior can be customized.
parse(source [, resolver [, handlers [, options]]])
source
Type: `string