btmills/babel-plugin-flow-react-proptypes

A babel plugin to generate React PropTypes definitions from Flow type declarations.

A babel plugin to generate React PropTypes definitions from Flow type declarations.

Example

With this input:

var React = require('react');

type FooProps = {
  an_optional_string?: string,
  a_number: number,
  a_generic_object: Object,
  array_of_strings: Array<string>,
  instance_of_Bar: Bar,
  anything: any,
  one_of: 'QUACK' | 'BARK' | 5,
  onw_of_type: number | string,
  nested_object_level_1: {
    string_property_1: string,
    nested_object_level_2: {
      nested_object_level_3: {
        string_property_3: string,
      },
      string_property_2: string,
    }
  }
}

export default class Foo extends React.Component {
  props: FooProps
}

The output will be:

var React = require('react');

var Foo = function (_React$Component) {
  // babel class boilerplate
}(React.Component)

Foo.propTypes = {
  an_optional_string: React.PropTypes.string,
  a_number: React.PropTypes.number.isRequired,
  a_generic_object: React.PropTypes.object.isRequired,
  array_of_strings: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
  instance_of_Bar: React.PropTypes.any.isRequired,
  anything: React.PropTypes.any.isRequired,
  one_of: React.PropTypes.oneOf(['QUACK', 'BARK', 5]).isRequired,
  onw_of_type: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
  nested_object_level_1: React.PropTypes.shape({
    string_property_1: React.PropTypes.string.isRequired,
    nested_object_level_2: React.PropTypes.shape({
      nested_object_level_3: React.PropTypes.shape({
        string_property_3: React.PropTypes.string.isRequired
      }).isRequired,
      string_property_2: React.PropTypes.string.isRequired
    }).isRequired
  }).isRequired
};

exports.default = Foo;

Usage

This plugin searches for a React components using type declaration. Works with functional components, React.createClass and ES6 classes.

Install

First install the plugin:

npm install --save-dev babel-plugin-flow-react-proptypes

Then add it to your babelrc:

{
  "presets": ["..."],
  "plugins": ["flow-react-proptypes"]
}

To save some bytes in production, you can also only enable it in development mode.

{
  "presets": ["..."],
  "env": {
    "development": {
      "plugins": ["flow-react-proptypes"]
    }
  }
}

Suppression

This plugin isn't perfect. You can disable it for an entire file with this directive (including quotes):

'no babel-plugin-flow-react-proptypes';