@charlietango/react-docs v7.0.0

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

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