atlassian/extract-react-types

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 289 Commits
.changeset		.changeset
.github/workflows		.github/workflows
assets		assets
flow-typed		flow-typed
packages		packages
.flowconfig		.flowconfig
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
.prettierrc		.prettierrc
LICENSE		LICENSE
babel.config.js		babel.config.js
code-of-conduct.md		code-of-conduct.md
contributing.md		contributing.md
eslint.config.cjs		eslint.config.cjs
jest.config.js		jest.config.js
package.json		package.json
readme.md		readme.md
yarn.lock		yarn.lock

Repository files navigation

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

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