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}`
);
}
};
};