node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »


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

build status Coverage Status npm version npm downloads Dependency Status


With this input:

var React = require('react');
export type Qux = {baz: 'literal'};
import type SomeExternalType from './types';
type FooProps = {
  an_optional_string?: string,
  a_number: number,
  a_boolean: boolean,
  a_generic_object: Object,
  array_of_strings: Array<string>,
  instance_of_Bar: Bar,
  anything: any,
  mixed: mixed,
  one_of: 'QUACK' | 'BARK' | 5,
  one_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,
  should_error_if_provided: void,
  intersection: {foo: string} & { bar: number } & Qux,
  some_external_type: SomeExternalType,
  some_external_type_intersection: {foo: string} & SomeExternalType,
export default class Foo extends React.Component {
  props: FooProps

The output will be:

var React = require('react');
if (typeof exports !== 'undefined')
  Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Qux', {
    value: {
      baz: require('prop-types').oneOf(['literal']).isRequired,
var babelPluginFlowReactPropTypes_proptype_SomeExternalType = require('./types').babelPluginFlowReactPropTypes_proptype_SomeExternalType ||
var Foo = (function(_React$Component) {
  // babel class boilerplate
Foo.propTypes = {
  an_optional_string: require('prop-types').string,
  a_number: require('prop-types').number.isRequired,
  a_boolean: require('prop-types').bool.isRequired,
  a_generic_object: require('prop-types').object.isRequired,
  array_of_strings: require('prop-types').arrayOf(require('prop-types').string).isRequired,
  instance_of_Bar: typeof Bar === 'function'
    ? require('prop-types').instanceOf(Bar).isRequired
    : require('prop-types').any.isRequired,
  anything: require('prop-types').any.isRequired,
  mixed: require('prop-types').any.isRequired,
  one_of: require('prop-types').oneOf(['QUACK', 'BARK', 5]).isRequired,
  one_of_type: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').string]).isRequired,
  nested_object_level_1: require('prop-types').shape({
    string_property_1: require('prop-types').string.isRequired,
    nested_object_level_2: require('prop-types').shape({
      nested_object_level_3: require('prop-types').shape({
        string_property_3: require('prop-types').string.isRequired,
      string_property_2: require('prop-types').string.isRequired,
  should_error_if_provided: function should_error_if_provided(props, propName, componentName) {
    if (props[propName] != null)
      return new Error(
        'Invalid prop `' +
          propName +
          '` of value `' +
          value +
          '` passed to `' +
          componentName +
          '`. Expected undefined or null.'
  intersection: require('prop-types').shape({
    foo: require('prop-types').string.isRequired,
    bar: require('prop-types').number.isRequired,
    baz: require('prop-types').oneOf(['literal']).isRequired,
  some_external_type: typeof babelPluginFlowReactPropTypes_proptype_SomeExternalType === 'function'
    ? babelPluginFlowReactPropTypes_proptype_SomeExternalType
    : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_SomeExternalType).isRequired,
  some_external_type_intersection: require('prop-types').shape(
      {foo: require('prop-types').string.isRequired,},
      babelPluginFlowReactPropTypes_proptype_SomeExternalType === require('prop-types').any
        ? {}
        : babelPluginFlowReactPropTypes_proptype_SomeExternalType
exports.default = Foo;


This plugin searches for a React components using type declaration. Works with functional components and ES6 classes. React.createClass is not currently supported.


First install the plugin:

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

Also install the prop-types package. This is required for React >=15.5.0. For earlier React versions you can use version 0.21.0 of this plugin, which doesn't use the prop-types package.

npm install --save prop-types

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"]


When combining it with some plugins, such as react-transform (also used by react-native in development mode), the way we normally add propTypes doesn't work. You can enable the useStatic option to cause us to generat code like:

class C extends Component<Props> {
  static propTypes = { x: require('prop-types').string }

Add the option to your babel config.

  "presets": ["..."],
  "plugins": [["flow-react-proptypes", { "useStatic": true }]]
## 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';

Specifically for react-native you can disable this for files in node_modules with the ignoreNodeModules config option. In react-native, you'll also want the useStatic option.

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

If you already have other plugins in plugins section. It is important to place flow-react-proptypes before the following plugins:

  • transform-class-properties
  • transform-flow-strip-types

If you're using the 'react' or 'flow' presets, you don't need to do anything special.

Minimizing production bundle size

In production, omitting props and minimizing bundle size can be done with the additon of two things:

  1. Add the transform-react-remove-prop-types plugin
  2. Omit exported types to allow for dead code pruning

There are cases where a library wishes to export type making types available in *.js.flow shadow files, but these may have no other purpose during runtime. If you wish to omit the corresponding export of the generated flow types, using this option with the transform-react-remove-prop-types plugin will allow for the smallest production bundle size.

An example snippet from a .babelrc:

  "plugins": [
    ["transform-react-remove-prop-types", {
      "mode": "wrap",
      "plugins": [
        ["babel-plugin-flow-react-proptypes", {"omitRuntimeTypeExport": true}],