A babel plugin to generate React PropTypes definitions from Flow type declarations.
Example
With this input:
var React = ; ; ; 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 Component props: FooProps}
The output will be:
var React = ; var babelPluginFlowReactPropTypes_proptype_Qux = baz: bpfrp_PropTypesisRequired; Component {}FoopropTypes = an_optional_string: bpfrp_PropTypesstring a_number: bpfrp_PropTypesnumberisRequired a_boolean: bpfrp_PropTypesboolisRequired a_generic_object: bpfrp_PropTypesobjectisRequired array_of_strings: bpfrp_PropTypesisRequired { return typeof Bar === 'function' ? bpfrp_PropTypesisRequired : bpfrp_PropTypesanyisRequired; } { if !ObjectprototypehasOwnProperty throw `Prop \`\` has type 'any' or 'mixed', but was not provided to \`\`. Pass undefined or any other value.`; } { if !ObjectprototypehasOwnProperty throw `Prop \`\` has type 'any' or 'mixed', but was not provided to \`\`. Pass undefined or any other value.`; } one_of: bpfrp_PropTypesisRequired one_of_type: bpfrp_PropTypesisRequired nested_object_level_1: bpfrp_PropTypesshape string_property_1: bpfrp_PropTypesstringisRequired nested_object_level_2: bpfrp_PropTypesshape nested_object_level_3: bpfrp_PropTypesshape string_property_3: bpfrp_PropTypesstringisRequired isRequired string_property_2: bpfrp_PropTypesstringisRequired isRequired isRequired { if propspropName != null throw `Invalid prop \`\` of value \`\` passed to \`\`. Expected undefined or null.`; } intersection: bpfrp_PropTypesshape foo: bpfrp_PropTypesstringisRequired bar: bpfrp_PropTypesnumberisRequired baz: bpfrp_PropTypesisRequired isRequired { return typeof bpfrp_babelPluginFlowReactPropTypes_proptype_SomeExternalType === 'function' ? bpfrp_babelPluginFlowReactPropTypes_proptype_SomeExternalTypeisRequired ? bpfrp_babelPluginFlowReactPropTypes_proptype_SomeExternalTypeisRequired : bpfrp_babelPluginFlowReactPropTypes_proptype_SomeExternalType : bpfrp_PropTypesshapebpfrp_babelPluginFlowReactPropTypes_proptype_SomeExternalTypeisRequired; } some_external_type_intersection: bpfrp_PropTypesshapeObjectisRequired;;;;
Versions
Starting in 14.0.0, we output ES6 import/export statements by default. The deadCode
option (explained below) will cause it to use common.js modules instead.
In version 25.0.0 and onward, we only support babel 7. Install version 24.x.x if you're using babel 6.
The reaason for the high major versions is that any change to the prop type output, including adding new checks that previously produced no output, impact users of this plugin. Check the changelog to see what's changed at each version.
Usage
This plugin searches for a React components using type declaration. Works with functional components and ES6 classes. React.createClass
is not currently supported.
Install
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:
To save some bytes in production, you can also only enable it in development mode.
deadCode
The deadCode
option (disabled by default) adds a predicate to the code allowing both your propTypes definitions and potentially the
entire 'prop-types' package to be excluded in certain builds. Unlike specifying this plugin in the development env, mentioned above,
this also works for packages published to npm.
"plugins":
The value of true
is short for process.env.NODE_ENV === 'production'
. You can alternatively pass any JavaScript expression. If the expression
returns a truthy value, then the propTypes will be removed. This works because e.g. webpack will subsitute the value of process.env.NODE_ENV
with 'production'
, resulting in the condition being 'production' === 'production'
, and then a minifer sees that the code we're generating can't be executed, and strips it, and the require('prop-types')
code out of the final bundle.
Note: In dead code mode, we use require/module.exports
instead of ES6 modules.
Example of specifying a custom expression:
"plugins":
useESModules
The useESModules
option forces this plugin to output ES6 modules, even if the deadCode
option is enabled. Your bundler will be responsible for removing the dead code.
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.
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.