Docs
Reference
Handlers
componentMethods

componentMethodsHandler

Finds all imperative methods in React components and documents its name, arguments, and return types. These are the different possible cases which are detected:

  • Methods in Class components which are not React lifecycle methods or the constructor
  • Assignment of methods to static properties on Class or Function components
  • Methods defined in the useImperativeHandle() hook in Function components

Examples

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

component.tsx
class MyComponent extends React.Component {
  /** myMethod description */
  static myMethod(argument: string): number {}
 
  render() {
    return <div />;
  }
}
component.tsx
class MyComponent extends React.Component {
  render() {
    return <div />;
  }
}
 
/** myMethod description */
MyComponent.myMethod = (argument: string): number => {};
component.tsx
const MyComponent = () => <div />;
 
/** myMethod description */
MyComponent.myMethod = (argument: string): number => {};
component.tsx
import { forwardRef, useImperativeHandle } from 'react';
 
forwardRef(function MyComponent(_, ref) {
  useImperativeHandle(
    ref,
    () => {
      return {
        /** myMethod description */
        myMethod(argument: string): number {},
      };
    },
    [],
  );
 
  return <div />;
});

Output

JSON
[
  {
    "methods": [
      {
        "name": "myMethod",
        "docblock": "myMethod description",
        "modifiers": ["static"],
        "params": [
          {
            "name": "argument",
            "optional": false,
            "type": {
              "name": "string"
            }
          }
        ],
        "returns": {
          "type": {
            "name": "number"
          }
        }
      }
    ]
  }
]