prop-types-definition
A package to extend prop-types to get property 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 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-types
patch 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.
; // patch PropTypes somehow, see below Component static propTypes = foo: PropTypesstring bar: PropTypesnumberisRequired // ... // now we can get prop-types definitionsfor let name in ComponentpropTypes const type = ComponentpropTypeskey; // some type definitions can have no getTypeDefinition method if typeof typegetTypeDefinition === 'function' console; // output// foo {// required: false,// type: {// name: 'string'// }// }// bar: {// required: true,// type: {// name: 'number'// }// }
Patch prop-type by your own
;; ; Component static propTypes = foo: PropTypesstring // ... // ...
Using as webpack loader
prop-types
can be patched via a webpack loader. In this case you nedd 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 = { // ...}; myCustomType { return type: name: 'myCustomType' // any extra details }
License
MIT