Add forwardRef / valid component prop type

[aldeed]

A component expecting another component to be passed in can do something like this:

Button: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired

However, if I pass in a Button component that has been wrapped in forwardRef, the prop type check fails. forwardRef returns an object with render function, not a function.

Can there be a built-in prop type for the forwardRef object?

And/or maybe a prop type for "anything that works as a component", which would be func, forwardRef obj, and any strings recognized as built-in DOM components.

See https://stackoverflow.com/questions/45315918/react-proptypes-component-class/45316411, which suggests:

FancyButton: function (props, propName, componentName) {
    if(!props[propName] || typeof(props[propName].render) != 'function') {
      return new Error(`${propName}.render must be a function!`);
    }
  },

[ljharb]

I think a Component propType would be better - that way as further types are created, it can be expanded to allow them (like forward refs)

[aldeed]

Agree @ljharb. For reference, this is the custom prop type I made that is working:

import { isValidElementType } from "react-is";

/**
 * We use an Error-like object for backward compatibility as people may call
 * PropTypes directly and inspect their output. However, we don't use real
 * Errors anymore. We don't inspect their stack anyway, and creating them
 * is prohibitively expensive if they are created too often, such as what
 * happens in oneOfType() for any type before the one that matched.
 */
function PropTypeError(message) {
  this.message = message;
  this.stack = "";
}
// Make `instanceof Error` still work for returned errors.
PropTypeError.prototype = Error.prototype;

function getComponentValidator() {
  function checkType(isRequired, props, propName, componentName, location, propFullName) {
    const val = props[propName];
    if (val == null) {
      if (isRequired) {
        if (props[propName] === null) {
          return new PropTypeError(`The ${location} '${propFullName}' is marked as required in '${componentName}', but its value is 'null'.`);
        }
        return new PropTypeError(`The ${location} '${propFullName}' is marked as required in '${componentName}', but its value is 'undefined'.`);
      }
    } else if (!isValidElementType(val)) {
      return new PropTypeError(`Invalid ${location} '${propFullName}' supplied to ${componentName}. Expected a string (for built-in components) or a class/function (for composite components).`);
    }
    return null;
  }

  const chainedCheckType = checkType.bind(null, false);
  chainedCheckType.isRequired = checkType.bind(null, true);
  return chainedCheckType;
}

const CustomPropTypes = {
  component: getComponentValidator(),
};

export default CustomPropTypes;

Usage:

import CustomPropTypes from "./CustomPropTypes";

FancyButton: CustomPropTypes.component.isRequired

Possibly it should be called validElementType to match the naming in the react-is package?

[ljharb]

This is a component, not an element?

For elements, there’s already an element propType - that should theoretically already work for forward refs.

[ljharb]

(Or if there’s not, there should be both component and element - am mobile rn so i can’t check)

[aldeed]

Yes, a component. forwardRef doesn't return an element, and we don't want to allow elements, only anything that can be used as a "component". So anything that passes the isValidElementType check.

[wmertens]

👍 specifically for adding a component PropType

[dfee]

Here is my current solution:

import PropTypes from "prop-types";
import React from "react";

describe("propTypes", () => {
  let error: typeof global.console.error; // typescript (feel free to remove)

  beforeEach(() => {
    error = global.console.error;
    global.console.error = jest.fn();
  });

  afterEach(() => {
    global.console.error = error;
  });

  it("should not warn on node [forwardRef]", () => {
    const propTypes = {
      as: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.string,
        PropTypes.shape({ render: PropTypes.func.isRequired }),
      ]),
    };
    const as = React.forwardRef((props, ref) =>
      React.createElement("div", { ref, ...props }),
    );
    PropTypes.checkPropTypes(propTypes, { as }, "prop", "test");
    expect(errorMock.mock.calls).toHaveLength(0);
  });
});

[wmertens]

@dfee thanks! I polyfilled prop-types with it:

polyfills.js:

import PropTypes from 'prop-types'

PropTypes.component = PropTypes.oneOfType([
	PropTypes.func,
	PropTypes.string,
	PropTypes.shape({render: PropTypes.func.isRequired}),
])

and now I put PropTypes.component wherever necessary

[ljharb]

"it has a render function" is a pretty brittle check, when react-is has a robust isForwardRef method available.

[wmertens]

@ljharb sure, but there aren't all that many objects with render functions that are also not a component. In my case it's a quick fix which helps tremendously. It would be great if prop-types added this, in the proper version with react-is. Is that on the table?

[eps1lon]

"it has a render function" is a pretty brittle check, when react-is has a robust isForwardRef method available.

react-is has a check for forwardRef elements not components. For a component propType all you need is isValidElementType.

You could use import { componentPropType } from '@material-ui/utils'. This works very similar to validators in the ´prop-typespackage and validates given values by usingisValidElementType`.

[ljharb]

elementType now exists.

[wmertens]

@ljharb I'm confused by that naming - I though React elements were the instantiated objects and components the classes/functions/strings that instantiate them?

[ljharb]

Ah, my mistake - this issue is looking for componentType, not elementType. Reopening.

[wmertens]

Looking at b67bbd4, it seems that .elementType is exactly the .component we're looking for. Just the naming is odd.

[ljharb]

div isn't a component, i suppose, so elementType makes the most sense?

[eps1lon]

It matches the terminology react is using internally. <Component /> is transpiled to React.createElement(Component) and React.createElement takes an element type as its first argument.

[wmertens]

Hmmm, indeed, https://reactjs.org/docs/react-api.html#createelement makes a distinction between components, fragments and strings, but all are element types. Name is ok for me, I don't need a test for just components 👍