Package Exports

react-docgen-typescript
react-docgen-typescript/lib
react-docgen-typescript/lib/parser
react-docgen-typescript/lib/parser.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-docgen-typescript) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-docgen-typescript

A simple parser for react properties defined in typescript instead of propTypes.

It can be used with react-styleguidist.

Installation

npm install --save-dev react-docgen-typescript

react-styleguidist integration

Include following line in your styleguide.config.js:

propsParser: require('react-docgen-typescript').parse

Example

In the example folder you can see react-styleguidist integration.

The component Column.tsx

import * as React from 'react';
import { Component } from 'react';

/**
 * Column properties.
 */
export interface IColumnProps {
    /** prop1 description */
    prop1?: string;
    /** prop2 description */
    prop2: number;
    /** 
     * prop3 description 
     */
    prop3: () => void;
    /** prop4 description */
    prop4: 'option1' | 'option2' | 'option3';
}

/**
 * Form column.
 */
export class Column extends Component<IColumnProps, {}> {
    
    render() {
        return <div>Test</div>;
    }            
}

Will generate the following stylesheet: Stylesheet example

The functional component Grid.tsx

import * as React from 'react';

/**
 * Grid properties.
 */
export interface IGridProps {
    /** prop1 description */
    prop1?: string;
    /** prop2 description */
    prop2: number;
    /**
     * prop3 description
     */
    prop3: () => void;
    /** Working grid description */
    prop4: 'option1' | 'option2' | 'option3';
}

/**
 * Form Grid.
 */
export const Grid = (props: IGridProps) => {
    const smaller = () => {return;};
    return <div>Grid</div>;
};

Will generate the following stylesheet: Stylesheet example

Thanks to contributors

@JocD Jacques Dukes - complete support for functional components and much more

@sapegin Artem Sapegin - fix for compatibility with react-styleguidist v5

@diegolanda Diego - support for different kinds of components

Thanks to others

The integration with reac-styleguidist wouldn't be possible without Vyacheslav Slinko pull request #118 react-styleguidist.