Table of contents

- Overview
- Getting started
- - 1. Installation
- 2. Your API source file (Component.tsx):
- 3. Your documentation extraction
- 4. The result
- Configuration
- Enable the children props.
- ParsePlugin

Overview

structured-types plugin to extract react specific properties from typesript prop types. If you are using react-prop-types, please see the react-prop-types plugin.

Getting started

$3

``bash
$ npm install @structured-types/react-plugin --save-dev
`

$3

`js
import React, { FC } from 'react';
/**
* MyComponent properties.
*/
type OwnProps = {
/* stringProp description /
stringProp?: string,

/* numberProp description /
numberProp: number,
};

/**
* MyComponent special component
*/
const MyComponent: FC = ({ stringProp }) =>

;

MyComponent.defaultProps = {
stringProp: 'test',
};

export default MyComponent;
`

$3

`ts
import { parseFiles } from '@structured-types/api';
import reactPlugin from '@structured-types/react-plugin';

const docs = parseFiles(['../src/components/Component.tsx'], {
plugins: [reactPlugin],
});
`

$3

`json
{
"default": {
"name": "MyComponent",
"extension": "react",
"kind": 11,
"properties": [
{
"parent": "OwnProps",
"optional": true,
"name": "stringProp",
"kind": 1,
"description": "stringProp description",
"value": "test"
},
{
"parent": "OwnProps",
"name": "numberProp",
"kind": 2,
"description": "numberProp description"
}
]
}
}
`

Configuration

The react typescript plugin exports some default properties, and you can also add or modify some of the other parsing options that will be specific only for the found react components. For other typescript/jsdoc types, the global options passed to parseFiles will still apply.

Enable the children props.

By default, the plugin removes the children property that is part of most react components, here is an example of how to re-enable the children properties by disabling the default filter:

import { parseFiles } from '@structured-types/api';
import reactPlugin from '@structured-types/react-plugin';


const docs = parseFiles(['../src/components/Component.tsx'], {
plugins: [{ ...reactPlugin, filter: undefined }],
});

ParsePlugin

type

Plugin type - provides the plugin name and the type resolver

_defined in @structured-types/api/packages/api/src/ts-utils.ts_

properties

| Name | Type | Parent | Default | Description |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| tsOptions | ts.CompilerOptions | DocsOptions | | |
| internalTypes | Record<string, PropKind> | ParseOptions | | internal types - libs by default includes classes such as String , Function ... |
| extract | string\[] | ParseOptions | | list of export names to be extracted. by default all exports are extracted |
| filter | function (


prop\

kind:
name: string
alias: string


parent

name\: string
loc: SourceLocation

loc

filePath: string
loc: SourcePositions

optional: boolean
readonly: boolean
abstract: boolean
async: boolean
visibility: "private" \| "protected" \| "public"
static: boolean
type: string
extension: string
description: string
fires: string\[]
see: string\[]
examples: JSDocExample\[]
tags: JSDocPropTag\[]
summary: string
deprecated: string \| true
ignore: boolean
usage: type\[]

) => boolean | ParseOptions | | filter properties function. By default filter out all props with ignore === true |
| maxDepth | number | ParseOptions | 6 | max depth for extracting child props. |
| collectHelpers | boolean | ParseOptions | | whether to save "helper" props that are used by the main parsed props if set to false will result in a smaller result set |
| collectGenerics | boolean | ParseOptions | true | whether to collect generics parameters |
| collectParameters | boolean`