Notoriously Psychedelic Modules


    6.2.2 • Public • Published

    React Docs

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


    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.


    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.


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




    npm i @charlietango/react-docs

    DownloadsWeekly Downloads






    Unpacked Size

    28.4 kB

    Total Files


    Last publish


    • thebuilder
    • frederik_bosch