Send props to Number Format - Material UI TextField

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 } })}
      />