How to use the airbnb-prop-types.componentWithName function in airbnb-prop-types

// $ExpectType Requireable
AirbnbPropTypes.childrenOfType('div');
// $ExpectType Requireable
AirbnbPropTypes.childrenOfType(ClassComp, FuncComp, 'div');

// $ExpectType Requireable
AirbnbPropTypes.childrenSequenceOf({ validator: PropTypes.number });
// $ExpectType Requireable
AirbnbPropTypes.childrenSequenceOf({ validator: PropTypes.string, max: 100 });
// $ExpectType Requireable
AirbnbPropTypes.childrenSequenceOf({ validator: PropTypes.bool, min: 0 });

// $ExpectType Requireable
AirbnbPropTypes.componentWithName('Foo');
// $ExpectType Requireable
AirbnbPropTypes.componentWithName(/Foo/);
// $ExpectType Requireable
AirbnbPropTypes.componentWithName('Foo', { stripHOCs: ['connect'] });

// $ExpectType Requireable
AirbnbPropTypes.disallowedIf(PropTypes.number, 'foo', PropTypes.string);

// $ExpectType Requireable
AirbnbPropTypes.elementType(ClassComp);
// $ExpectType Requireable
AirbnbPropTypes.elementType(FuncComp);
// $ExpectType Requireable
AirbnbPropTypes.elementType('div');
// $ExpectType Requireable
AirbnbPropTypes.elementType('*');
// $ExpectError
AirbnbPropTypes.elementType(ClassComp, FuncComp, 'div');

// $ExpectType Requireable
AirbnbPropTypes.childrenOfType(ClassComp, FuncComp, 'div');

// $ExpectType Requireable
AirbnbPropTypes.childrenSequenceOf({ validator: PropTypes.number });
// $ExpectType Requireable
AirbnbPropTypes.childrenSequenceOf({ validator: PropTypes.string, max: 100 });
// $ExpectType Requireable
AirbnbPropTypes.childrenSequenceOf({ validator: PropTypes.bool, min: 0 });

// $ExpectType Requireable
AirbnbPropTypes.componentWithName('Foo');
// $ExpectType Requireable
AirbnbPropTypes.componentWithName(/Foo/);
// $ExpectType Requireable
AirbnbPropTypes.componentWithName('Foo', { stripHOCs: ['connect'] });

// $ExpectType Requireable
AirbnbPropTypes.disallowedIf(PropTypes.number, 'foo', PropTypes.string);

// $ExpectType Requireable
AirbnbPropTypes.elementType(ClassComp);
// $ExpectType Requireable
AirbnbPropTypes.elementType(FuncComp);
// $ExpectType Requireable
AirbnbPropTypes.elementType('div');
// $ExpectType Requireable
AirbnbPropTypes.elementType('*');
// $ExpectError
AirbnbPropTypes.elementType(ClassComp, FuncComp, 'div');

// $ExpectType Requireable

const TableofContents = (props) => (
  <nav>
    {props.heading}
    <ul>
      {
        // eslint-disable-next-line react/prop-types
        React.Children.map(props.children, (child) =&gt; <li>{child}</li>)
      }
    </ul>
  </nav>
);

TableofContents.propTypes = {
  /** The heading text  */
  heading: PropTypes.oneOfType([
    componentWithName('ColoredHeading'),
    componentWithName('SidebarHeading')
  ])
};

export default TableofContents;

<nav>
    {props.heading}
    <ul>
      {
        // eslint-disable-next-line react/prop-types
        React.Children.map(props.children, (child) =&gt; <li>{child}</li>)
      }
    </ul>
  </nav>
);

TableofContents.propTypes = {
  /** The heading text  */
  heading: PropTypes.oneOfType([
    componentWithName('ColoredHeading'),
    componentWithName('SidebarHeading')
  ])
};

export default TableofContents;

import React from 'react';
import PropTypes from 'prop-types';
import { componentWithName } from 'airbnb-prop-types';
import { WithIconWrapperProps } from '@airbnb/lunar-icons/lib/withIcon';
import { STRIP_HOC_NAMES } from '../constants';

const propType: PropTypes.Requireable = componentWithName<
  React.ReactElement
>(/(Icon[A-Z]|DirectionalIcon)/, {
  stripHOCs: STRIP_HOC_NAMES,
});

export default propType;

/** The placeholder text for the input */
  placeholder: PropTypes.string,
  /** The Search button */
  buttonSearch: PropTypes.shape(ButtonWithIcon.propTypes),
  /** Custom submit function */
  onSubmit: PropTypes.func,
  /** Custom change function for the text input */
  onChange: PropTypes.func,
  /** Default input text value */
  defaultText: PropTypes.string,
  /** Render suggestions as passable element */
  suggestions: PropTypes.element,
  /** @molecules/TypeAheadDropdown */
  orgDropdown: PropTypes.shape(PropTypes.TypeAheadDropdown),
  /** postInputFilter passable component */
  postInputFilter: componentWithName('SelectBox')
};

HeaderSearch.defaultProps = {
  id: 'header-search',
  label: 'Search terms',
  placeholder: 'Search Mass.gov',
  buttonSearch: {
    ariaLabel: '',
    usage: 'secondary'
  }
};

export default HeaderSearch;

<span>{prefix}</span>
          
        )
      }
      <span>{ is.fn(title) ? title({ ...linkArgs }) : title}</span>
    
  );
};

EmergencyHeader.propTypes = {
  /** A function whose return value is displayed in the text to the right of the divider bar. */
  title: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired,
  /** A string that controls different color themes for the component. */
  theme: PropTypes.oneOf(['c-warning', 'c-primary-alt', 'c-primary', 'c-gray', 'c-error']),
  /** A SVG icon to display to the left of the prefix text. */
  icon: componentWithName('Icon'),
  /** An optional string displayed to the left of the divider bar. */
  prefix: PropTypes.string
};
EmergencyHeader.defaultProps = {
  theme: 'c-warning',
  prefix: 'Emergency Alerts',
  icon: 
};

export default EmergencyHeader;