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

export default Column;

Will generate the following stylesheet:

Thanks

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