7.0.0 • Published 1 year ago

@charlietango/react-docs v7.0.0

Weekly downloads
265
License
MIT
Repository
-
Last release
1 year ago

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

NameTypeDefaultDescription
deststringWrite all output files to this path
componentsDirstring / Array'components', 'modules'Paths that contains directories with react components. Used for filtering out non components
filter(file: string) => boolean / booleantrueCustom filter method to use instead of the default. Set to false to skip filtering.
globOptionsObjectOptions to to use for the globbing method
outputMarkdownboolean / stringfalseIf true, will output Markdown to dest. If a string, the value will be used as the output path
outputJsonboolean / stringfalseIf true, will output JSON to dest. If a string, the value will be used as the output path
outputCSharpboolean / stringfalseIf true, will output CSharp to dest. If a string, the value will be used as the output path
namespacestringNamespace to use when generating CSharp view models
verbosebooleanfalseOutput extra logging
quietbooleanfalseDon't output anything to log
throwOnWarningbooleanfalseThrow 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,
};
7.0.0

1 year ago

6.2.1

1 year ago

6.2.2

1 year ago

6.2.0

2 years ago

6.1.1

3 years ago

6.1.0

3 years ago

6.0.0

3 years ago

6.0.3

3 years ago

6.0.2

3 years ago

5.4.5

3 years ago

5.4.4

3 years ago

5.4.3

3 years ago

5.4.2

4 years ago

5.4.1

4 years ago

5.4.0

4 years ago

5.3.2

4 years ago

5.3.1

4 years ago

5.3.0

4 years ago

5.2.0

4 years ago

5.1.2

4 years ago

5.1.1

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.1.4

5 years ago

4.1.2

5 years ago

4.1.1

5 years ago

4.1.0

5 years ago

4.0.2

5 years ago

4.0.1

5 years ago

4.0.0

5 years ago

3.5.3

5 years ago

3.5.2

5 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.0

5 years ago

3.2.1

5 years ago

3.2.0

5 years ago

3.1.0

5 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.5.0

6 years ago

2.4.1

6 years ago

2.4.0

6 years ago

2.3.3

6 years ago

2.3.2

6 years ago

2.3.1

6 years ago

2.3.0

6 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.0

6 years ago

1.4.0

6 years ago

1.3.3

6 years ago

1.1.18

6 years ago

1.1.17

6 years ago

1.1.13

6 years ago

1.1.12

6 years ago

1.1.11

6 years ago

1.1.10

6 years ago