@charlietango/react-docs

Generate docs using react-docgen, and output to Markdown, json or CSharp ViewModels.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@charlietango/react-docs
Minified + gzip package size for @charlietango/react-docs in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.