propTypeHandler

Tries to find the prop types on react components. It looks for:

A static property called propTypes on Class components
Assignment to a property called propTypes on Function or Class components

The prop types that are used need to be imported either from the react or the prop-types (opens in a new tab) NPM package.

Examples

When the propTypeHandler is active any of these components will result in the output below

component.tsx

import PropTypes from 'prop-types';
 
class MyComponent extends React.Component {
  static propTypes = {
    foo: PropTypes.string,
    bar: PropTypes.number.isRequired,
  };
  render() {
    return <div />;
  }
}

component.tsx

import PropTypes from 'prop-types';
 
class MyComponent extends React.Component {
  render() {
    return <div />;
  }
}
 
MyComponent.propTypes = {
  foo: PropTypes.string,
  bar: PropTypes.number.isRequired,
};

component.tsx

import PropTypes from 'prop-types';
 
const MyComponent = () => <div />;
 
MyComponent.propTypes = {
  foo: PropTypes.string,
  bar: PropTypes.number.isRequired,
};

Output

JSON

[
  {
    "props": {
      "foo": {
        "type": {
          "name": "string"
        },
        "required": false
      },
      "bar": {
        "type": {
          "name": "number"
        },
        "required": true
      }
    }
  }
]

propTypeComposition CLI