Send props to Number Format - Material UI TextField - reactjs

Question

I want to create a TextField element to handle numerical fields. I want to handle this component dynamically, in this way it would help me not only to manage credit card formats, telephone etc. I am using the react-number-format library in the same way as the Material-UI example does.
I'm trying to send by props "prefix" and "format" without favorable result.
I wanted to know how I should send those properties, if I have a way to do it.
Thanks in advance !
function NumberFormatCustom(props) {
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
{...other}
getInputRef={inputRef}
onValueChange={values => {
onChange({
target: {
value: values.value
}
});
}}
thousandSeparator={","}
decimalSeparator={"."}
isNumericString
prefix={props.prefix} //"$"
/>
);
}
NumberFormatCustom.propTypes = {
inputRef: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired
};
class NumberTextField extends Component {
state = {
numberformat: this.props.value
};
handleChange = event => {
const targetField = this.props.name;
const targetValue = event.target.value;
this.setState({
...this.state,
numberformat: targetValue
});
this.props.updateCurrentUserFieldsOnChange(targetField, targetValue);
};
render() {
const { fullWidth, label, name, readOnly, prefix } = this.props;
return (
<Fragment>
<TextField
fullWidth={fullWidth ? fullWidth : true}
label={label ? label : "react-number-format"}
name={name}
value={this.state.numberformat}
onChange={this.handleChange}
InputProps={{
inputComponent: NumberFormatCustom,
readOnly: Boolean(readOnly),
prefix: prefix
}}
/>
</Fragment>
);
}
}

Answer 1

You must use the customInput props which will allow you to integrate the style of material-ui. You can also pass several props to be able to control as you wish the mask. Also if you want a prefix just use the prefix props. thousandSeparator is a boolean but by default the numbers are separated by commas, if you prefer spaces you just have to add it as in my example
import NumberFormat from 'react-number-format';
import TextField from 'material-ui/TextField';
<NumberFormat
{...props}
value={value}
name={name}
mask={mask}
customInput={TextField}
prefix={'$'}
format={format || null}
type="text"
thousandSeparator={thousandSeparator ? ' ' : null}
onValueChange={({ value: v }) => onChange({ target: { name, value: v } })}
/>

Answer 2

If you want to have format your textfield as numberformat you can add your number format filed to FormControl field of material ui like below code.
<FormControl focused className="col " variant="outlined">
<InputLabel className="mText">your label</InputLabel>
<NumberFormat customInput={TextField}
variant="outlined"
thousandSeparator={true}
onChange={handleChange}
autoComplete="off"/>
</CustomFormControl>
Best regards.