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 method getTypeDefinition() 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 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 = function() {
    // ...
};
 
myCustomType.getTypeDefinition = function() {
    return {
        type: {
            name: 'myCustomType',
            // any extra details
        }
    }
}

License

MIT