react extract proptypes, isRequired and defaultProps from component

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. otto wants to to this question. 。

I have the following component:

import React from 'react'
import PropTypes from 'prop-types'

const MyComponent = ({ text1, text2 }) => {
    return (
        <div>
            <p>{text1}</p>
            <p>{text2}</p>
        </div>
    )
}
MyComponent.propTypes = {
    text1: PropTypes.string,
    text2: PropTypes.string,
}
MyComponent.defaultPropTypes = {
    text1: 'React',
    text2: 'is cool',
}

export default MyComponent

and then I am importing it like this

import MyComponent from "./MyComponent";

console.log(MyComponent.propTypes)

This prints a object with all propNames as a function. I am not able to get the type from the object. How do I get the proptype (in this example string) and "isRequired" from this component? I want to use it for automatically render a table with all possible propNames + PropType + isRequired + defaultPropType

Answer 1

You cant retrieve the information you are looking for by reading the propType properties. Each item in the propTypes is actually a validation wrapper function that obscures the actual type validation.

There is a way to achieve what you are looking for, but it isn't particularly pretty. See this answer .

Another option for your scenario is to create and export another static property with your component that includes the information you need. Then create a utility method to map your property data into PropTypes

For example:

// -- utility

const validators = {
    string: PropTypes.string,
    string_required: PropTypes.string.isRequired,
}

const getPropTypesFromValidators = (o) => {
    return Object.entries(MyComponent.validators).reduce((acc, [field, validatorKey]) => {
        return { ...acc, [field]: validators[validatorKey] }
    }, {})
}


/// --- component

const MyComponent = ({ text1, text2 }) => {
    return (
        <div>
            <p>{text1}</p>
            <p>{text2}</p>
        </div>
    )
}
MyComponent.validators = {
    text1: 'string',
    text2: 'string_required',
}

MyComponent.propTypes = getPropTypesFromValidators(MyComponent.validators);

MyComponent.defaultPropTypes = {
    text1: 'React',
    text2: 'is cool',
}

// -- app

console.log(MyComponent.validators);

A second option could be to wrap the PropTypes object and add your own annotations, for example:

const AnnotatedPropTypes = Object.keys(PropTypes).reduce((acc, key) => {
  const fn = (...args) => PropTypes[key](...args);
  fn.description = key;

  if (typeof PropTypes[key].isRequired === "function") {
    fn.isRequired = (...args) => PropTypes[key].isRequired(...args);
    fn.isRequired.description = `${key} (required)`;
  }

  return { ...acc, [key]: fn };
}, {});

// ---- component

...

MyComponent.propTypes = {
  text1: AnnotatedPropTypes.string,
  text2: AnnotatedPropTypes.string.isRequired,
};


console.log(MyComponent.propTypes.text1.description)

(The AnnotatedPropTypes object above is just an example and probably doesnt cover all the use cases)