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,
};