For my project, it's desirable to pass the null value in ponent props to indicate an unspecified value (a "known unknown", if you will). It's our team's convention to use null this way.

Via ponent propTypes definitions, I would like to require a value be passed for a prop, yet allow it to be null (not undefined) without React prop type validation firing a warning.

So to restate that in an i/o style:

• prop value = string/number/object/etc --> no warning
• prop value = null --> no warning
• prop value = undefined (either explicitly or just omitting a prop value assignment) --> warning

How can this behavior be acplished?

One idea is to write some alternative to .isRequired, like .isDefined that won't fire a warning for a null value, but I don't see how to do this without forking or abandoning the prop-types library.

For my project, it's desirable to pass the null value in ponent props to indicate an unspecified value (a "known unknown", if you will). It's our team's convention to use null this way.

Via ponent propTypes definitions, I would like to require a value be passed for a prop, yet allow it to be null (not undefined) without React prop type validation firing a warning.

So to restate that in an i/o style:

• prop value = string/number/object/etc --> no warning
• prop value = null --> no warning
• prop value = undefined (either explicitly or just omitting a prop value assignment) --> warning

How can this behavior be acplished?

One idea is to write some alternative to .isRequired, like .isDefined that won't fire a warning for a null value, but I don't see how to do this without forking or abandoning the prop-types library.

• javascript
• reactjs
• react-proptypes

Share Improve this question Follow edited Oct 20, 2017 at 22:40 Erik Hermansen asked Oct 19, 2017 at 21:45 Erik HermansenErik Hermansen 2,37933 gold badges2323 silver badges4949 bronze badges 4

• Possible duplicate of React warns about passed prop with value null, where the PropType for the prop is not required – bluesixty Commented Oct 19, 2017 at 22:18
• Have you ever considered to use TypeScript? It offers that out of the box at pile time, with the cost of having to tanspile the project. – lilezek Commented Oct 19, 2017 at 22:23
• I feel my question differs from the possible duplicate referenced above. The other person is like "why can't I do this? what's wrong?" and I'm like "how do I do this specific thing?" And it's not an acceptable answer for me to make a prop optional. – Erik Hermansen Commented Oct 20, 2017 at 22:33
• Re TypeScript, I appreciate the thought, but that solution can't be applied in my case. – Erik Hermansen Commented Oct 20, 2017 at 22:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I'm not sure if you could get it working in a chainable way (I've thought about it for maybe two minutes), but maybe you could use a custom validator?

function allowNull(wrappedPropTypes) {
  return (props, propName, ...rest) => {
    if (props[propName] === null) return null;
    return wrappedPropTypes(props, propName, ...rest);
  }
}

MyComponent.propTypes = {
  nullOrNumber: allowNull(PropTypes.number.isRequired)
};