babel-plugin-react-flow-props-to-prop-types

Convert Flow React props annotation to PropTypes

Supports most Flow types (see below)
Maintains comments
Works across modules (can import types)

Supported:

any/mixed Unknown types
void/null Empty types
number / string / boolean Primitives
42 / "hello" / true Literals
[1, 2, 3] Tuples
{ ... } Objects
- { prop: number } Object Properties
- { prop?: number } Optional properties
- { [prop: string]: number } Optional Indexers
{ [key: string]: number } Object indexers
Array<string> Arrays
Object Unknown Objects
Function Unknown Functions
RegExp regular expressions
boolean | string Unions
{ foo: number } & { bar: string } Intersections
Referencing other types:
- type Alias = number - Type Aliases
- interface Stuff {} - Interfaces
- class Thing {} - Class Declarations
- import type {Alias} from "./other"; Type imports

Unsupported:

{ a: number, [b: string]: number } Combining properties and indexers
{ [a: string]: number, [b: string]: number } Multiple indexers
{ (): void } Object call properties
a.b Qualified type identifiers
import typeof Export from "./other"; Typeof imports

Example

In:

class MyComponent extends React.Component {
  props: {
    // Add a class name to the root element
    className: string
  };

  // ...
}

Out:

class MyComponent extends React.Component {
  props: {
    // Add a class name to the root element
    className: string
  };
  static propTypes = {
    // Add a class name to the root element
    className: PropTypes.string.isRequired
  };

  // ...
}

Installation

$ yarn add prop-types prop-types-extra
$ yarn add --dev babel-plugin-react-flow-props-to-prop-types

Note: prop-types-extra is necessary for intersection type support.

Usage

Via `.babelrc` (Recommended)

.babelrc

{
  "plugins": [
    ["react-flow-props-to-prop-types", { /* options */ }]
  ]
}

Via CLI

$ babel --plugins react-flow-props-to-prop-types script.js

Via Node API

require("babel-core").transform("code", {
  plugins: [
    ["react-flow-props-to-prop-types", { /* options */ }]
  ]
});

Options

`resolveOpts` (optional)

Passed through to node-resolve

Override type used in propTypes

Sometimes you have Flow types which cannot be translated into PropTypes. In these scenarios you can provide your own type:

import type {PropType} from "babel-plugin-react-flow-props-to-prop-types";

class MyComponent extends React.Component {
  props: {
    foo: PropType<UnknownFunctionType, Function>
  };
}

PropType is defined as:

type PropType<T, R> = T;

So Flow will use the first type you provide, while this Babel plugin will use the second.

Current Tags

0.15.0 ... latest (9 years ago)