A babel plugin to generate React PropTypes definitions from Flow type declarations.
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;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-proptypesAlso 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 pacakge.
npm install --save prop-typesThen 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"]
}
}
}This plugin isn't perfect. You can disable it for an entire file with this directive (including quotes):
'no babel-plugin-flow-react-proptypes';
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent