Extract React Types

One stop shop to document your react components.

Getting started 🏁

Step 1: Install

npm install --save-dev babel-plugin-extract-react-types pretty-proptypes

Step 2: Annotate your prop types

export interface AvatarPropTypes {
  /** Provides a url for avatars being used as a link. */
  href?: string;
  /** Defines the size of the avatar */
  size?: 'small' | 'medium' | 'large';
  /** Name will be displayed in a tooltip */
  name?: string;
  /** A url to load an image from (this can also be a base64 encoded image). */
  src?: string;
  /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
  testId?: string;
}

Step 3: Output prop types

pretty-proptypes can display props from two sources.

Option 1. Using babel-plugin-extract-react-types and passing the component to Props

.babelrc

{
  "plugins": ["babel-plugin-extract-react-types"]
}

import Props from 'pretty-proptypes';
import MyCoolComponent from '../MyCoolComponent';

<Props heading="My Cool Component" component={MyCoolComponent} />;

Option 2. Directly passing a component's props to Props with extract-react-types-loader or getting types from extract-react-types and writing it to a file

import Props from 'pretty-proptypes';

<Props
  heading="My Cool Component"
  props={require('!!extract-react-types-loader!../MyCoolComponent')}
/>;

This analyses prop type definitions, and default props. It creates descriptions from comments before the type definitions, and will render markdown syntax using react-markings.

Packages

1. extract-react-types Extract Flow & TypeScript types from React Components
2. extract-react-types-loader Webpack loader for extract-react-types
3. babel-plugin-extract-react-types A Babel plugin to store the types of React components as a property on the component for documentation
4. kind2string kind2string is designed to take the data structures output by extract-react-types and convert it down to a (useful) string.
5. pretty-proptypes PrettyPropTypes is designed to display the output of extract-react-types and display rich prop information for consumers.

Contribute

Pull requests, issues and comments welcome - please read our contributing guidelines and our code of conduct.