Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React.PropTypes.number float with min and max

completed: React.PropTypes.number,

Can i specify a minimum and maximum to a number props in React component.

expected something like following:

completed: React.PropTypes.numberBetween(min, max),

I generate an array to specify the range

attempt:

completed: React.PropTypes.oneOf(Array.from({length: max -min+1, (v, k) => k + min})),

However , i want completed props to accept also float as well , whereas , it accepts only integer now .

How to make the following constraints combined :

  • prop is number ( integer, float, double,...any number)

  • between MIN and MAX

like image 464
Abdennour TOUMI Avatar asked Dec 08 '22 19:12

Abdennour TOUMI


2 Answers

You can use Custom Validation.

completed: function(props, propName, componentName) {
   if(props[propName] < MIN || props[propName] > MAX) {
      return new Error('Invalid');
   }
}
like image 67
VJAI Avatar answered Dec 10 '22 09:12

VJAI


By writing a Custom Props Validator, u can achieve this. try this:

num: function(props, propName, componentName) {
    if(typeof props[propName] != 'number'){
      return new Error ('Invalid type of `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
    }else if (props[propName] < MIN || props[propName] > MAX) {
      return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
    }
},
like image 29
Mayank Shukla Avatar answered Dec 10 '22 07:12

Mayank Shukla