I have a React component which I would like to enforce one of two props to be provided - if neither is provided I'd like to be able to trigger a PropType warning:
MyComponent.propTypes = {
firstProp: PropTypes.string.isRequired, // required only if `otherProp` not provided
otherProp: PropTypes.string.isRequired, // required only if `firstProp` not provided
}
I believe this is possible with AirBnB's prop-types but I'm wondering if this can be done with only React PropTypes.
There is an npm for everything. Here is one for conditional prop types based on props. Here is an example of how I used it in a project for determining ad size prop types.
import React, { Component } from 'react';
import isRequiredIf from 'react-proptype-conditional-require';
import PropTypes from 'prop-types';
class AdSlot extends Component {
// React component stuff
}
const slotPropTypes = PropTypes.oneOfType([
PropTypes.string, // e.g. 'fluid'
PropTypes.arrayOf(PropTypes.number), // e.g. [300, 250]
PropTypes.arrayOf(PropTypes.array), // e.g. [[300, 250], [1650, 300]]
PropTypes.arrayOf(PropTypes.oneOfType([ // e.g. ['fluid', [300, 250]]
PropTypes.string.isRequired,
PropTypes.array,
])),
]);
const responsiveSizesPropTypes = PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.number,
PropTypes.array,
PropTypes.string,
]));
const doesNotHaveResponsiveSizes = props => !(props.hasOwnProperty('responsiveSizes'));
const doesNotHaveSlotSizes = props => !(props.hasOwnProperty('slotSizes'));
AdSlot.proptypes = {
slotSizes: isRequiredIf(slotPropTypes, doesNotHaveResponsiveSizes),
responsiveSizes: isRequiredIf(responsiveSizesPropTypes, doesNotHaveSlotSizes),
}
export default AdSlot;