I'm trying to create a custom PropType that checks if an array has numerical values and has a length of 2 (and there's some constraint on the ordering of the numbers).
Obviously I can do Array.PropType.arrayOf(Array.PropType.number) for the first two constraints.
I'd like to reuse this in my custom PropType (instead of rolling out my own numerical and array check).
How do I do that?
React.PropTypes.arrayOf( React.PropTypes.number ) just returns a function, so you can instead provide your own function to perform the validation.
Your function will be passed three parameters: props, propName, componentName
see the second to last example shown in React.PropTypes from the docs.
So a function that should satisfy your constraints would be:
function isTwoElementArrayOfNumbers( props, propName, componentName ){
var _array = props[ propName ];
if( _array && _array.constructor === Array && _array.length === 2 ){
if( !_array.every(
function isNumber( element ){
return typeof element === 'number';
})
){
return new Error('elements must be numbers!');
}
}
else{
return new Error('2 element array of numbers not provided!');
}
}
...in your react element
propTypes:{
numArray: isTwoElementArrayOfNumbers
},
PropType's arrayOf) became problematic. My actual suggested solution (writing your own simple function to check the prop) is perfectly valid and still works fine.I don't know about extending them, I'm not sure that's possible.
But you could store the above as an exported constant and use it to compose properties of other propTypes (but I think you probably already know this):
export const CustomProp = Array.PropType.arrayOf(Array.PropType.number)
export const OtherCustomProp = contains({
foo: React.PropTypes.string,
bars: CustomProp
});
