React-number-format: ReactNumberFormat, Label and Outlined Inputs Mask

[lucasglobalsys]

Hello Guys.
I have a problem with ReactNumberFormat and OutlinedInput of Material UI.

See the sample:

<NumberFormat
  value={param.value}
  onChange={(event): void => {
    const stateParamsAux = stateParams.slice();
    stateParamsAux[index].value = event.target.value;
    setStateParams(stateParamsAux);
    updateStateParamsInParent(stateParamsAux);
    if (extraOnChange) extraOnChange();
  }}
  label={labelProperty === 'name' ? param.name : param.title}
  disabled={disabled || false}
  required={param.required || true}
  customInput={OutlinedInput}
  format="####"
/>;

The problem is: OutlinedInput have a property LABEL, and it automatically set a text on top of input. But if i use React-Number-Format, the label dont work if a pass this property to children (like a arrow function in customInput) or a parent.

How should I proceed to apply the react-number-format format to an Outlined Input of Material Ui?

[DhudumVishal]

Same issue, I have a custom outlined input field in which I need to use NumberFormat.

[DhudumVishal]

Found it!
https://material-ui.com/components/text-fields/#integration-with-3rd-party-input-libraries

[lucasglobalsys]

Found it!
https://material-ui.com/components/text-fields/#integration-with-3rd-party-input-libraries

could you post your code/sample with OutlinedInput and React-Number-Format work?

[DhudumVishal]

Just add variant="outlined" in TextField.
Here is the simplified version of the material UI example.

import React from "react";
import PropTypes from "prop-types";
import NumberFormat from "react-number-format";
import TextField from "@material-ui/core/TextField";

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value
          }
        });
      }}
    />
  );
}

NumberFormatCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired
};

export default function FormattedInputs() {
  const [value, setValue] = React.useState(0);

  return (
    <TextField
      label="react-number-format"
      value={value}
      onChange={e => setValue(e.target.value)}
      variant="outlined"
      InputProps={{
        inputComponent: NumberFormatCustom
      }}
    />
  );
}

[lucasglobalsys]

Thank you very much! That's worked fine.

To another people with this same problem and using typescript, see:

import React from 'react';
import NumberFormat from 'react-number-format';
import TextField from '@material-ui/core/TextField';

interface InnerDecimalInputProps {
  inputRef: (instance: NumberFormat | null) => void;
  onChange: (event: { target: { name: string; value: string } }) => void;
  name: string;
}

interface DecimalInputProps {
  label: string;
}

const InnerDecimalInput = (innerProps: InnerDecimalInputProps): JSX.Element => {
  const { inputRef, onChange, ...other } = innerProps;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={(innerValues): void => {
        onChange({
          target: {
            name: innerProps.name,
            value: innerValues.value,
          },
        });
      }}
      decimalScale={2}
      thousandSeparator
      isNumericString
      prefix="R$ "
    />
  );
};

export const DecimalInput = (props: DecimalInputProps & any): JSX.Element => {
  const { label, ...otherPropertyes } = props;

  return (
    <TextField
      label={label}
      variant="outlined"
      name="decimalInput"
      placeholder="ex: 10.50"
      className="decimalInput"
      {...otherPropertyes}
      InputProps={{
        inputComponent: InnerDecimalInput as any,
      }}
    />
  );
};

To use this code in another component, do the folowing:

import { DecimalInput } from './NumberInput';

const [decimalTest, setDecimalTest] = useState('1000.58');

<DecimalInput
  label="Test Outlined Decimal"
  value={decimalTest}
  onChange={(event: React.ChangeEvent<HTMLInputElement>): void =>
    setDecimalTest(event.target.value)
  }
/>;