React PropTypes: range of numbers
You can use custom Prop validator.
completed: function(props, propName, componentName) {
if (props[propName]>=1 && props[propName]<=10) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}
Please refer the documentation for further details.
https://reactjs.org/docs/typechecking-with-proptypes.html
If it's a sequence, You can use a smart ES6. :)
[BTW, I believe the first answer is the most appreciate, this one is just trick]
PropTypes.oneOf([...(new Array(10))].map((_, i) => i + 1))
**Explanation:** This `[...(new Array(10))].map((_, i) => i + 1)` part will give to the sequence.
// Sequence
console.log([...(new Array(5))].map((_, i) => i + 1))
// Spreading the Sequence numbers
console.log(...[...(new Array(5))].map((_, i) => i + 1))
According to the documentation, you can define your customProps
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}
So for your case you can try the following
function withinTen(props, propName, componentName) {
componentName = comopnentName || 'ANONYMOUS';
if (props[propName]) {
let value = props[propName];
if (typeof value === 'number') {
return (value >= 1 && value <= 10) ? null : new Error(propName + ' in ' + componentName + " is not within 1 to 10");
}
}
// assume all ok
return null;
}
something.propTypes = {
number: withinTen,
content: React.PropTypes.node.isRequired
}