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 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:

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

// ...
}
`

Out:

`js
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

`sh
$ 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

$3

.babelrc

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

$3

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

$3

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

Options

$3

Passed through to node-resolve

$3

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

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

class MyComponent extends React.Component {
props: {
foo: PropType
};
}
`

PropType is defined as:

`js
type PropType = T;
``

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