How to declare React PropTypes XOR

Question

I used to write components with multiple configuration For example:

ResponsiveTable.PropTypes = {
  width: React.PropTypes.number, //used if widthOffset and minWidth are undefined
  widthOffset: React.PropTypes.number, //used if width is undefined
  minWidth: React.PropTypes.number, //used if width is undefined
};

How can I declare props that can be used only if there i snot already other props set?

A XOR option would be usefull. I read https://facebook.github.io/react/docs/reusable-components.html but it didn't help.

Any ideas?

Answer 1

Solution:

React.PropTypes.oneOfType([
    React.PropTypes.shape({
        width: React.PropTypes.number.isRequired
    }),
    React.PropTypes.shape({
        widthOffset: React.PropTypes.number,
        minWidth: React.PropTypes.number.isRequired
    }),  
])

Answer 2

you can create custom property:

yourComponent.propTypes = {
  ...
  customProp: function(props, propName, componentName) {
    if(checkValid){
      return new Error('validation failed');
    } 
  }
  ...
}

this is in react docs https://reactjs.org/docs/typechecking-with-proptypes.html