@charlietango/react-docs

React Docs

Generate docs from React components and Flow or TypeScript view model files.

Usage

Add the dependency

yarn add @charlietango/react-doc --dev

Generate JSON files with react-docgen, and process them:

const docs = require('@charlietango/react-docs');

docs('src/models/**/*.json', {
  dest: 'dist/models', // Add dest to write to files
  outputMarkdown: true,
});

or calling the bin

$ react-doc src/{components,types}/**/*.js --dest dist/models --md

Warning for CSharp models

Generating CSharp models is only supported for Flow and TypeScript files. This is a basic rewrite of the React props to C#/.NET. No validation is done on the actual files. Not all Flow/TypeScript features are supported, since there's not a simple way to convert them to C#.

• Flow number is converted to int. Use @type {TYPE} in comment tag for the prop, to change the number type.

Config

Name	Type	Default	Description
dest	string		Write all output files to this path
componentsDir	string / Array	['components', 'modules']	Paths that contains directories with react components. Used for filtering out non components
filter	(file: string) => boolean / boolean	true	Custom filter method to use instead of the default. Set to false to skip filtering.
globOptions	Object		Options to to use for the globbing method
outputMarkdown	boolean / string	false	If true, will output Markdown to dest. If a string, the value will be used as the output path
outputJson	boolean / string	false	If true, will output JSON to dest. If a string, the value will be used as the output path
outputCSharp	boolean / string	false	If true, will output CSharp to dest. If a string, the value will be used as the output path
namespace	string		Namespace to use when generating CSharp view models
verbose	boolean	false	Output extra logging
quiet	boolean	false	Don't output anything to log
throwOnWarning	boolean	false	Throw an error if warnings are logged

JSDoc flags

You can use these flags to modify how a prop is handled.

• @internal - Ignore this prop - It's only used internally in the React App.
• @type - Set a specific C# type for this prop - Like decimal

Example input files

In addition to any React style files that react-docgen can handle, there is a fallback that will attempt to extract a single Flow or TypeScript type from a file, and create a model from it. This is done by using the type as the props for a React Component.

ImageModel.js

// @flow

/**
 * Description of the model
 **/
export type ImageModel = {
  /** Image src URL */
  src: string,
  /** Original image height */
  height?: number,
  /** Original image width */
  width?: number,
};