prop-types-definition
Patch for prop-types to get property type definition in runtime.
Why?
When using React components, prop-types is commonly used to define properties type checking. Unfortunally, prop-type doesn't provide definition details that can be useful for documentation generation or component's playground. This library adds ability to get property type definition in runtime by calling a getTypeDefinition() method.
As anternative, tools like react-docgen can be used. However, such tools are usualy based on static code analysis and have many limitations.
Install
npm install prop-types-definition
Usage
prop-types-definition can be used in two ways:
- As
prop-typespatch on demand - As a webpack loader
When prop-types is patched, you can get property type definition by calling getTypeDefinition() method.
NOTE:
getTypeDefinition()method can be missed for certain cases. Usually it's a custom type cheching. You need to check that a property checking has a methodgetTypeDefinition()before invoking it.
import PropTypes from 'prop-types';
// patch PropTypes somehow, see below
export default class Component extends React.Component {
static propTypes = {
foo: PropTypes.string,
bar: PropTypes.number.isRequired
}
// ...
}
// now we can get prop-types definitions
for (let name in Component.propTypes) {
const type = Component.propTypes[key];
// some type definitions can have no getTypeDefinition method
if (typeof type.getTypeDefinition === 'function') {
console.log(key, type.getTypeDefinition());
}
}
// output
// foo {
// required: false,
// type: {
// name: 'string'
// }
// }
// bar: {
// required: true,
// type: {
// name: 'number'
// }
// }Patch prop-type by your own
import PropTypes from 'prop-types';
import patchPropTypes from 'prop-types-definition';
patchPropTypes(PropTypes);
export default class Component extends React.Component {
static propTypes = {
foo: PropTypes.string,
// ...
}
// ...
}Using as webpack loader
prop-types can be patched via a webpack loader. In this case you need to add a rule for prop-types index file in this way:
const webpackConfig = {
// ...
module: {
rules: [
{
test: /\/prop-types\/index\.js$/i,
loader: 'prop-types-definition/loader'
},
// ...
]
}
};Custom property types
In case you're implementing a custom property validator and want geting a definition details, you need to add getTypeDefinition() method to a validator.
const myCustomType = function() {
// ...
};
myCustomType.getTypeDefinition = function() {
return {
type: {
name: 'myCustomType',
// any extra details
}
}
}License
MIT