How to declare React PropTypes XOR

Question

I used components with several configurations for writing. 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 a props that can be used only if I have some other details?

A XOR will be helpful. I read https://facebook.imtqy.com/react/docs/reusable-components.html but that 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

I tried customProp. I got something like this:

 /** * Configure a React type to be usable only if including ot exclufing other props from component * @param {React.PropTypes} propType current prop type * @param {Array} excludedProps names of the props to exclude * @param {Array} includedProps name of the props to include */ function propTypeXOR(propType,excludedProps,includedProps){ return(props, propName, componentName) =>{ if(props[propName]){ if(typeof props[propName] !== propType){ return new Error("Failed propType: Invalid prop `"+propName+"` of type `"+propType+"` supplied to `"+componentName+"`, expected `number`"); }else{ excludedProps.map((excludedPropName) =>{ if(props[excludedPropName]){ return new Error("forbidden prop `"+excludedPropName+"` was specified in `"+componentName+"` when using the prop `"+propName+"`"); } }) if(includedProps){ includedProps.map((includedPropName) =>{ if(props[includedPropName]){ return new Error("required prop `"+includedPropName+"` was not specified in `"+componentName+"` when using the prop `"+propName+"`"); } }) } } }else{ if(excludedProps){ var error = ""; excludedProps.map((excludedPropName) =>{ if(!props[excludedPropName]){ error+="`"+excludedPropName+"`,"; } }) if(error!=""){ return new Error("required prop `"+propName+"` was not specified in `"+componentName+"`.It is required when props ["+error+"] are not defined."); } } } } } ResponsiveTable.propTypes = { width: propTypeXOR("number",["widthOffset","minWidth"]), widthOffset: propTypeXOR("number",["width"],["minWidth"]), minWidth: propTypeXOR("number",["width"],["widthOffset"]) }; 

It works: the user must declare either with width, or with widthOffset and minWidth. But I think that a more integrated solution will facilitate the announcement and improve the error that has occurred.

I post github responsiveness

Answer 3

you can create a custom property:

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

this is in docs reactions https://facebook.imtqy.com/react/docs/reusable-components.html#prop-validation