v2.7.0

New

This version adds a great new feature: Support for Flow type definitions. Thanks a lot to @danez for implementing this feature ( #48 ).

react-docgen is now able to extract type definitions as in this example:

import React, { Component } from 'react';

type Props = {
  /** Description of prop "foo". */
  primitive: number,
  /** Description of prop "bar". */
  literalsAndUnion: 'string' | 'otherstring' | number,
  arr: Array<any>,
  func?: (value: string) => void,
  obj?: { subvalue: ?boolean },
};

/**
 * General component description.
 */
export default class MyComponent extends Component<void, Props, void> {

  props: Props;

  render(): ?ReactElement {
    // ...
  }
}

In the JSON output, every prop will have a new field named flowType. If you use both, flow (for static type checks) and React propTypes (for dynamic type checks) you can do so without any collisions. The JSON blob now simply contains more information and you can decide which one to use for your documentation.

Have a look at the more extensive description in the README to learn how flow types are represented.

v2.6.3

Fixes

• propTypeHandler now ignores nodes that are not ObjectExpressions. If there was something else, e.g.

  propTypes: Foo.bar,
  

  propTypeHandler used to throw an error.

v2.6.2

Fixes

• Fixed docblock parsing for stateless named functions (function declarations) used as default exports ( #51, 0b8546a ).

v2.6.1

Fixes

• Fix docblock extraction for classes with decorators ( #49 , 44777a9 )

v2.6.0

New: --resolver CLI option

The --resolver lets you specify from the CLI which resolver^* to use. It can either be the name of a built-in resolver or a path to a JavaScript module that exports a resolver function:

react-docgen --resolver findExportedComponentDefinition ./path/to/component.js
# same as 
react-docgen ./path/to/component.js

react-docgen --resolver findAllComponentDefinitions ./path/to/component.js

react-docgen --resolver ./path/to/custom/resolver.js ./path/to/component.js

Read more about resolvers.

---

* Resolvers contain the logic to find React component definitions in the JavaScript files.

v2.5.0

New

• Better support for React Native ( #44 )

Fixes

• Variables used for propTypes and defaultProps, e.g.

  MyClass.defaultProps = defaultProps;
  

  are now properly resolved for class and stateless components. Thanks to @oliviertassinari for reporting this issue! ( #45, #46 )

v2.4.0

New

Support for stateless/funtional components (React v0.14)

Since React v0.14, components can be defined as simple functions:

function SimpleComponent(props) {
    return <div>{this.props.soSimple}</div>
}

Thanks to @iamdustan, react-docgen is now able to detect these components as well. The findExportedComponentDefinition and findAllComponentDefinitions have been updated accordingly.

A function is considered to be a stateless React component if we can determine that it returns a JSX element or the result of a React.createElement call. As always, there are limits to what can be achieved with static analysis, so it might not detect every possible case (but maybe your component is too complex then anways? ;) ).

v2.3.1

Fixes

The propTypeCompositionHandler was not part of the default handlers and therefore the generated documentation didn't contain information about composition.

v2.3.0

Improved

• Now parses code that uses do expressions or function bindings (#32).

v2.2.0

(I wasn't sure whether this should be considered to be a bug fix or new feature, but I went with new feature instead)

New

• Consider docblock above decorator annotations (#18). In the following example the docblock is now used for the component description:

  /**
  * This is the description
  */
  @SomeDecorator
  export default class extends React.Component {
  
  };

• Detect isRequired in shape annotations (second part of #21)