40

I need to make at least one of the props required:

MyComponent.propTypes = {
   data: PropTypes.object,
   url: PropTypes.string
};

So in the example above, either data or url prop must be provided. The use case here is that the user could either provide the data or the url. If the url is provided, then the component will fetch the data.

Bonus question: How do I do at least one prop vs only one of the props?

1
  • @AndrewLi updated the question
    – Kousha
    Feb 16, 2017 at 20:41

5 Answers 5

49

PropTypes actually can take a custom function as an argument so you could do something like this:

MyComponent.propTypes = {
  data: (props, propName, componentName) => {
    if (!props.data && !props.url) {
      return new Error(`One of props 'data' or 'url' was not specified in '${componentName}'.`);
    }
  },

  url: (props, propName, componentName) => {
    if (!props.data && !props.url) {
      return new Error(`One of props 'url' or 'data' was not specified in '${componentName}'.`);
    }
  }
}

which allows for customer Error messaging. You can only return null or an Error when using this method

You can find more info on that here

https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

from the react docs:

// You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don't `console.warn` or throw, as this
  // won't work inside `oneOfType`.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
4
  • 1
    Perfect. One further question: how do I return the type (like PropTypes.object) for these props?
    – Kousha
    Feb 16, 2017 at 21:02
  • Since calling the PropTypes function directly is deprecated you would need to use your own way of validating. Most would find the typeof props.data == 'object' satisfactory but arrays and functions would also return object. To be honest i've only had to use these custom validators a few times in a production application. 99% of the time the basic PropTypes should be fine
    – finalfreq
    Feb 16, 2017 at 21:11
  • BTW you don't have to have two custom prop validators. One is just fine, just make sure the other isn't required.
    – Andrew Li
    Apr 20, 2017 at 19:35
  • @finalfreq typeof function () {} === "function", not "object" ;) Jan 29, 2018 at 23:37
29

A more concise version of @finalfreq's solution:

const requiredPropsCheck = (props, propName, componentName) => {
  if (!props.data && !props.url) {
    return new Error(`One of 'data' or 'url' is required by '${componentName}' component.`)
  }
}

Markdown.propTypes = {
  data: requiredPropsCheck,
  url: requiredPropsCheck,
}
4

Adding on top of finalfreq answer and relating to kousha comment to it.

I had a button component that required either icon or title. Make sure at least one of the is there like in the above answer, after that check its type can be validated like so:

Button.propTypes = {
  icon: (props, propName, componentName) => {
    if (!props.icon && !props.title) {
      return new Error(`One of props 'icon' or 'title' was not specified in '${componentName}'.`)
    }
    if (props.icon) {
      PropTypes.checkPropTypes({
        icon: PropTypes.string, // or any other PropTypes you want
      },
      { icon: props.icon },
      'prop',
      'PrimaryButtonWithoutTheme')
    }
    return null
  }
  title: // same process
}

For more info about PropTypes.checkPropTypes read here

2
  • Any info on those last two arguments: 'prop' and 'PrimaryButtonWithoutTheme'? Sep 4, 2022 at 0:56
  • @NickManning haven't worked on the topic in some time, but as far as I remember both are used for generating the error massage from prop-types in case the prop checking fails.
    – U Rogel
    Sep 5, 2022 at 8:37
2

I wrote this helper to solve the same problem in a re-usable way. You use it like a propType function:

MyComponent.propTypes = {
  normalProp: PropType.string.isRequired,

  foo: requireOneOf({
    foo: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ]),
    bar: PropTypes.string,
  }, true),
};

and in this example it ensures one of foo or bar is in the MyComponent props. If you leave out the second argument it'll ensure only one of foo or bar is passed.

/**
 * Takes a propTypes object ensuring that at least one of the passed types
 * exists on the component.
 *
 * Usage:
 *
 * MyComponent.propTypes = {
 *   normalProp: PropType.string.isRequired,
 *
 *   foo: requireOneOf({
 *     foo: PropTypes.oneOfType([
 *       PropTypes.string,
 *       PropTypes.number
 *     ]),
 *     bar: PropTypes.string,
 *   }, true),
 * };
 *
 * @param requiredProps object
 * @param allowMultiple bool = false  If true multiple props may be
 *                                    passed to the component
 * @return {Function(props, propName, componentName, location)}
 */
export const requireOneOf = (requiredProps, allowMultiple = false) => {
  return (props, propName, componentName, location) => {
    let found = false;

    for (let requiredPropName in requiredProps) {
      if (requiredProps.hasOwnProperty(requiredPropName)) {
        // Does the prop exist?
        if (props[requiredPropName] !== undefined) {
          if (!allowMultiple && found) {
            return new Error(
              `Props ${found} and ${requiredPropName} were both passed to ${componentName}`
            );
          }

          const singleRequiredProp = {};
          singleRequiredProp[requiredPropName] = requiredProps[requiredPropName];
          const singleProp = {};
          singleProp[requiredPropName] = props[requiredPropName];

          // Does the prop match the type?
          try {
            PropTypes.checkPropTypes(singleRequiredProp, singleProp, location, componentName);
          } catch (e) {
            return e;
          }
          found = requiredPropName;
        }
      }
    }

    if (found === false) {
      const propNames = Object.keys(requiredProps).join('", "');
      return new Error(
        `One of "${propNames}" is required in ${componentName}`
      );
    }
  };
};
2

   
function requireALeastOne(checkProps) {
  return function(props, propName, compName) {
    const requirePropNames = Object.keys(checkProps);

    const found = requirePropNames.find((propRequired) => props[propRequired]);

    try {
      if (!found) {
        throw new Error(
          `One of ${requirePropNames.join(',')} is required by '${compName}' component.`,
        );
      }
      PropTypes.checkPropTypes(checkProps, props, propName, compName);
    } catch (e) {
      return e;
    }
    return null;
  };
}


const requireALeast = requireALeastOne({
  prop1: PropTypes.string,
  prop2: PropTypes.number
});

Comp.propTypes = {
  prop1: requireALeast,
  prop2: requireALeast
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.