can't set limit for react number format

[lmjcvm]

Hello guys, I have a issue with limit. I handle react number format limit by isAllowed={(values) => { const { floatValue } = values; return isUndefined(floatValue) || (floatValue >= minRatePercent && floatValue <= maxRatePercent); }} But if my minRate percent is 5 and maxRate is 30, and i want my rate is 25. i can't type 2 because it's smaller than 5

[sqal]

I'm having a similar problem right now and wonder if there is some workaround or perhaps would be better to add a new props to the lib like min and max

I also tried to limit a number in the onValueChange callback but that approach leaves the caret very buggy

function handleChange({ floatValue }) {
  setValue(clampNumber(floatValue, min, max))
}

[iloveip]

min and max props would be very helpful. Similar to InputNumber in antd https://ant.design/components/input-number/.

[s-yadav]

Not allowing user to type, or changing value while the user is typing is bad user experience. Instead, you should do it in onBlur handler. Ant inputs handle it in blur when min/max is provided. Native input allow typing and doesn't even reset when min and max are provided.

We can probably add the min-max support in react-number-format only. But, till then you can do it in onBlur handler.

[senter-logistics]

i found this #98 but it didn't work as expected

[cblanquera]

Used this package recently because material ui docs are referencing this so I thought, why not... Anyways if you need for min and max, I found a method called formatAsNumber in this project's code.

https://github.com/s-yadav/react-number-format/blob/master/src/number_format.js#L467-L500

You can use the mentioned method to finish the formatting after you describe min and max. So a work around (not an ultimate solution) could be something like this.

import React from 'react'
import NumberFormat from 'react-number-format'

export default function MyComponent(props) {
   // manually instantiate the `NumberFormat` component (i know...)
   // pass along props or separate the props for NumberFormat
   const formatter = new NumberFormat({ ...props  })

   // now make a new formatter
   const formatter = val => {
     if (!isNaN(props.min) && val <= props.min) val = props.min
     if (!isNaN(props.max) && val >= props.max) val = props.max
     // let the original `NumberFormat.formatAsNumber` take care of the rest
     return formatter.formatAsNumber(String(val))
   }

   // if there is a format defined, use that, 
   // otherwise, if min or max, then use the formatter we made
   const safeFormat = props.format 
     || (!isNaN(min) || !isNaN(max)) 
     ? formatter 
     : undefined

  // pass along props or separate the props for NumberFormat
  return <NumberFormat {...props} format={safeFormat} />
}