Common Props
customInput React.Component<any>
default: null
This allow supporting custom input components with number format.
import { NumericFormat } from 'react-number-format';
import { TextField } from '@mui/material';
<NumericFormat value={12323} customInput={TextField} thousandSeparator/>;
Note: customInput expects reference of component (not a render prop), if you pass an inline component like this <NumericFormat customInput={() => <TextField />} />
, it will not work.
Demo
value number | string
default: undefined
This is the value for the input field. It can be a float number or a formatted string.
info
If the value passed is a string representation of the number and any of the format prop has number on it, the valueIsNumericString
props should be passed as true
. See valueIsNumericString for more details
import { NumericFormat } from 'react-number-format';
<NumericFormat value={123} />;
Demo
defaultValue number | string
default : undefined
Value to be used as default value if value is not provided.
import { NumericFormat } from 'react-number-format';
<NumericFormat defaultValue="12312" />;
Demo
displayType text | input
default: input
If value is input
, it renders an input element where formatting happens as you type characters. If value is text
, it renders formatted text in a span tag.
import { NumericFormat } from 'react-number-format';
<NumericFormat displayType="input" value={110} />;
<NumericFormat displayType="text" value={110} />;
Demo
getInputRef elm => void
default: null
Method to get reference of input, span (based on displayType prop) or the customInput's reference.
import { NumericFormat } from 'react-number-format';
import { useRef } from 'react';
export default function App() {
let ref = useRef();
return <NumericFormat getInputRef={ref} />;
}
isAllowed (values) => boolean
default: undefined
A checker function to validate the input value. If this function returns false, the onChange method will not get triggered and the input value will not change.
import { NumericFormat } from 'react-number-format';
const MAX_LIMIT = 1000;
<NumericFormat
value={11}
isAllowed={(values) => {
const { floatValue } = values;
return floatValue < MAX_LIMIT;
}}
/>;
Demo
valueIsNumericString boolean
default: false
If value is passed as string representation of numbers (unformatted) and thousandSeparator is .
in numeric format or number is used in any format props like in prefix or suffix in numeric format and format prop in pattern format then this should be passed as true
.
Note: Prior to 5.2.0 its was always required to be passed as true when value is passed as string representation of numbers (unformatted).
import { PatternFormat } from 'react-number-format';
<PatternFormat format="+1 (###) ###-####" value="123456789" valueIsNumericString={true} />;
Demo
onValueChange (values, sourceInfo) => {}
default: undefined
This handler provides access to any values changes in the input field and is triggered only when a prop changes or the user input changes. It provides two arguments namely the valueObject as the first and the sourceInfo as the second. The valueObject parameter contains the formattedValue
, value
and the floatValue
of the given input field. The sourceInfo contains the event
Object and a source
key which indicates whether the triggered change is due to an event or a prop change. This is particularly useful in identify whether the change is user driven or is an uncontrolled change due to any prop value being updated.
info
If you are using values.value
which is non formatted value as numeric string. Make sure to pass valueIsNumericString to be true if any of the format prop has number on it, or if thousandSeparator is .
in NumericFormat . See valueIsNumericString for more details.
import { NumericFormat } from 'react-number-format';
<NumericFormat
value={1234}
prefix="$"
onValueChange={(values, sourceInfo) => {
console.log(values, sourceInfo);
}}
/>;
Demo
renderText (formattedValue, customProps) => React Element
default: undefined
A renderText method useful if you want to render formattedValue in different element other than span. It also returns the custom props that are added to the component which can allow passing down props to the rendered element.
import { NumericFormat } from 'react-number-format';
<NumericFormat
value={1231231}
thousandsGroupStyle="lakh"
thousandSeparator=","
displayType="text"
renderText={(value) => <b>{value}</b>}
/>;
Demo
type string
default: text
This allows passing the input type attribute value, Supported types include text
| tel
| password
import { NumericFormat } from 'react-number-format';
<NumericFormat value={123} type="text" />;
Demo
Other Props
Other than this it accepts all the props which can be given to a input or span based on displayType you selected.