axe-prop-types

Same as React PropTypes, but allows you to read/extract inputted values during runtime (useful for automating component documentation). No need to modify any existing code: just follow steps 1 & 2 of installation, and extract using Component.propTypes

1console.log(AnyComponent.propTypes.color.info);
2
3// will output (for example):
4{
5    propTypeName: "oneOf",
6    isRequired: false,
7    allowedValues:[
8		"beige",
9		"red",
10		"green",
11		"black",
12		"white",
13		"purple"
14    ]
15}

Example

Extracting the prop-types of "BrowserRouter" component (from the famous React Router) will output the following object:

1{
2    key: "basename",
3    propTypeName: "string",
4    isRequired: false
5},
6{
7    key: "forceRefresh",
8    propTypeName: "bool",
9    isRequired: false
10},
11{
12    key: "getUserConfirmation",
13    propTypeName: "func",
14    isRequired: false
15},
16{
17    key: "keyLength",
18    propTypeName: "number",
19    isRequired: false
20},
21{
22    key: "children",
23    propTypeName: "node",
24    isRequired: false
25}

To achieve the above, follow installation step 1 & 2 below, and try the following code:

1import React from 'react';
2import { BrowserRouter } from 'react-router-dom';
3
4const logPropTypes = ({propTypes}) => Object.keys(propTypes).forEach(key => console.log({
5    key,
6    ...propTypes[key].info
7}));
8
9// log the propType data
10logPropTypes(BrowserRouter);

Another example:

As you can see below, you can continue using the "prop-types" package; i.e. no need to modify existing code:

1import React from 'react';
2import PropTypes from 'prop-types';
3
4const YourComponent = () => <div>hello!</div>;
5
6YourComponent.propTypes = {
7    value: PropTypes.number.isRequired,
8    someShape: PropTypes.shape({
9        aString: PropTypes.string
10    })
11};
12
13const logPropTypes = ({propTypes}) => Object.keys(propTypes).forEach(key => console.log({
14    key,
15    ...propTypes[key].info
16}));
17
18// log the propType data
19logPropTypes(YourComponent);

Installation

Step 1: add dependency

1npm install axe-prop-types --save

or if you use yarn:

1yarn add axe-prop-types

Step 2: add to webpack config

Add to your webpack resolve configuration:

1resolve:{
2    alias:{
3        'prop-types$': path.join(__dirname, 'node_modules/axe-prop-types')
4    }
5}

example webpack.config.js:

1const path = require('path');
2
3module.exports = {
4    entry: './src/entry',
5    output: {
6        path: path.join(__dirname, 'build'),
7        filename: 'app.js'
8    },
9    module: {
10        rules: [
11            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
12        ]
13    },
14    resolve: {
15        alias: {
16            'prop-types$': path.join(__dirname, 'node_modules/axe-prop-types')
17        }
18    }
19};

License

MIT