Skip to content
A simple parser for react properties defined in typescript instead of propTypes.
TypeScript
Branch: master
Clone or download
Latest commit 844590c Oct 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows add github actions for issue reproduction Oct 23, 2019
examples example: styleguidist sections example added Dec 17, 2018
src Merge pull request #216 from malcolm-kee/broken-test-in-windows Oct 23, 2019
.gitignore example update to newest styleguidist, webpack versions May 25, 2017
.lintstagedrc Auto-formatting for code + linting = code consistency (#65) Jan 21, 2018
.npmignore package verison chagned to 0.0.4 Apr 3, 2017
.travis.yml Update .travis.yml Feb 21, 2018
LICENSE.md license added & improved readme May 8, 2016
README.md
package-lock.json feat: extract literal values from enums Aug 26, 2019
package.json Update package.json Oct 23, 2019
stylesheet-example-column.png Readme updated for functional components Mar 21, 2017
stylesheet-example-grid.png Readme updated for functional components Mar 21, 2017
tsconfig.json fix(TS): Fix Set lookup error Sep 17, 2018
tslint.json Auto-formatting for code + linting = code consistency (#65) Jan 21, 2018

README.md

react-docgen-typescript

Build Status

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').withDefaultConfig([parserOptions]).parse

or if you want to use custom tsconfig file

propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json', [parserOptions]).parse

parserOptions

  • propFilter:

    {
      skipPropsWithName?: string[] | string;
      skipPropsWithoutDoc?: boolean;
    }

    or

    (prop: PropItem, component: Component) => boolean

    In case you do not want to print out all the HTML props, because your component is typed like this:

    const MyComponent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ()...

    you can use this workaround inside propFilter:

    if (prop.parent) {
      return !prop.parent.fileName.includes('node_modules')
    }
    
    return true

    Note: children without a doc comment will not be documented.

  • componentNameResolver:

    (exp: ts.Symbol, source: ts.SourceFile) => string | undefined | null | false

    If a string is returned, then the component will use that name. Else it will fallback to the default logic of parser.

  • shouldExtractLiteralValuesFromEnum: boolean

    If set to true, string enums and unions will be converted to docgen enum format. Useful if you use Storybook and want to generate knobs automatically using addon-smart-knobs.

  • savePropValueAsString: boolean

    If set to true, defaultValue to props will be string. Example:

      Component.defaultProps = {
          counter: 123,
          disabled: false
      }

    Will return:

      counter: {
          defaultValue: '123',
          required: true,
          type: 'number'
      },
      disabled: {
          defaultValue: 'false',
          required: true,
          type: 'boolean'
      }

Styled components example:

componentNameResolver: (exp, source) => exp.getName() === 'StyledComponentClass' && getDefaultExportForFile(source);

The parser exports getDefaultExportForFile helper through its public API.

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

Contributions

The typescript is pretty complex and there are many different ways how to define components and their props so it's realy hard to support all these use cases. That means only one thing, contributions are highly welcome. Just keep in mind that each PR should also include tests for the part it's fixing.

Thanks to all contributors without their help there wouldn't be a single bug fixed or feature implemented. Check the contributors tab to find out more. All those people supported this project. THANK YOU!

Thanks to others

The integration with React Styleguidist wouldn't be possible without Vyacheslav Slinko pull request #118 at React Styleguidist.

You can’t perform that action at this time.