How do I integrate react-number-format into react-hook-form with the Material UI text field?

[REDLIGHTFILMS]

I can't think of any way to integrate it.Have you or have you seen examples of such integrations. Like on Codesandbox.io or something?

[bluebill1049]

Take a look at the example: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r there is a mask component should be quite similar.

[oualidmaz]

Here is an example of react-number-format + react-hook-form + Material UI
https://codesandbox.io/s/late-feather-shr01

[bluebill1049]

please use render instead, as will get deprecated.

[oualidmaz]

here is the same example with render :
https://codesandbox.io/s/great-merkle-u6z49

[bluebill1049]

Thank you very much for those examples @oualidmaz

[zakpatterson]

How to get the unformatted value in handleSubmit though?

https://codesandbox.io/s/hungry-sound-8j0jn

[taschetto]

@zakpatterson https://codesandbox.io/s/practical-pateu-61jy9

[dpickett]

This worked for me and had it under hook form's state provider:

<Controller
  render={({ onChange, value }) => (
    <NumberFormat
      allowNegative={false}
      decimalScale="2"
      onValueChange={(v) => onChange(v.value)}
      prefix="$"
      value={value}
    />
  )}
  name={name}
  control={control}
  fixedDecimalScale
/>

The key is wiring up the onChange and value render props.

[ogradye]

This doesn't seem to work for me atleas unless you remove {...field} from the rendered component like

<Controller
name="auction.starting_bid"
control={control}
rules={{ required: true }}
render={({ field }) => <NumberFormat
thousandSeparator={true}
prefix={'$'}
displayType="input"
type="text"
onValueChange={(values) => {
    field.onChange(values.value);
}}
className={`form-control ${errors.auction?.starting_bid ? 'is-invalid' : ''}`}
/>}
/>
``` any idea why?

[drewk]

In the above example you're using only the onChange prop from the render prop's field parameter which means you're not passing name, value, ref, or onBlur down to the NumberFormat component. I'm not certain how this will ultimately affect react hook form's ability to monitor your field, but I would expect things like the touched and dirty states to potentially malfunction since I believe those depend on the onBlur method supplied by react hook form. I do not think you want to simply spread the field parameter into your NumberFormat but rather follow something like the pattern I shared a few posts above, where I destructure the field parameter and pass the individual props where needed. In other words something like this:

<Controller
  name="auction.starting_bid"
  control={control}
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, name, value, ref } }) => (
    <NumberFormat
      thousandSeparator={true}
      prefix="$"
      displayType="input"
      type="text"
      onValueChange={(values) => onChange(values.floatValue)}
      className={`form-control ${errors.auction?.starting_bid ? 'is-invalid' : ''}`}
      name={name}
      value={value}
      onBlur={onBlur}
      ref={ref}
    />
  )}
/>```

[jekh]

The answer from @drewk also seems to work when using customInput={TextField} from mui, but instead of passing ref={ref}, you need to pass inputRef={ref}, as mentioned here: https://github.com/s-yadav/react-number-format#getting-reference.

[Mrjuanblack]

@tinhtinh95 Were you able to reset your form? I ran into the same problem:
Controller:

<Controller
    disabled={isLoading}
    name="price"
    control={control}
    render={({field}) =>
        <TextField
            {...field}
            error={!!errors.price}
            helperText={errors.price?.message}
            label="Price"
            margin="none"
            variant="outlined"
            fullWidth
            InputProps={{
                inputComponent: CurrencyFormatCustom as any
            }}
        />
    }
/>

CurrencyFormatCustom:

interface CustomProps {
    onChange: (event: { target: { name: string; value: string } }) => void;
    name: string;
}
const CurrencyFormatCustom = React.forwardRef<NumericFormatProps, CustomProps>(
    function NumericFormatCustom(props, ref) {
      const { onChange, ...other } = props;
  
      return (
        <NumericFormat
          {...other}
          getInputRef={ref}
          onValueChange={(values) => {
            onChange({
              target: {
                name: props.name,
                value: values.value,
              },
            });
          }}
          thousandSeparator
          valueIsNumericString
          prefix="$ "
        />
      );
    },
);

[oussamaAbdelwahed]

In the above example you're using only the onChange prop from the render prop's field parameter which means you're not passing name, value, ref, or onBlur down to the NumberFormat component. I'm not certain how this will ultimately affect react hook form's ability to monitor your field, but I would expect things like the touched and dirty states to potentially malfunction since I believe those depend on the onBlur method supplied by react hook form. I do not think you want to simply spread the field parameter into your NumberFormat but rather follow something like the pattern I shared a few posts above, where I destructure the field parameter and pass the individual props where needed. In other words something like this:

<Controller
  name="auction.starting_bid"
  control={control}
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, name, value, ref } }) => (
    <NumberFormat
      thousandSeparator={true}
      prefix="$"
      displayType="input"
      type="text"
      onValueChange={(values) => onChange(values.floatValue)}
      className={`form-control ${errors.auction?.starting_bid ? 'is-invalid' : ''}`}
      name={name}
      value={value}
      onBlur={onBlur}
      ref={ref}
    />
  )}
/>```

Hi , i'am facing an issue with isDirty , it's not being set to true when I change input, i'am instead returning a TextField from the controller render prop and setting the TextField prop inputComponent like this ```
inputComponent: useNumericFormatter
? (CustomNumericFormat as any)
: undefined,

My code : 
type CustomNumericFormatProps = {
  onChange: (event: { target: { name: string; value: string } }) => void;
  onBlur: () => void;
  name: string;
};

const CustomNumericFormat = forwardRef<
  NumericFormatProps,
  CustomNumericFormatProps
>(function NumericFormatCustom(props, ref) {
  const { onChange, ...other } = props;

  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          },
        });
      }}
      valueIsNumericString
    />
  );
});

type Props = {
  control: Control<any, any>;
  name: string;
  searchBar?: boolean;
  complementaryOnChangeCallback?: (value: string) => void;
  useNumericFormatter?: boolean;
  valueAsNumber?: boolean;
  sx?: SxProps<Theme>;
} & TextFieldProps;

// eslint-disable-next-line import/prefer-default-export
export const CustomTextField: React.FC<Props> = ({
  name,
  control,
  complementaryOnChangeCallback,
  sx,
  searchBar,
  useNumericFormatter,
  valueAsNumber,
  ...rest
}) => {
  const { t, i18n }: { t: any; i18n: Ti18n } = useTranslation<'common'>();
  const locale = i18n.language;

  return (
    <Controller
      name={name}
      control={control}
      render={({
        field: { ref, onChange, ...field },
        fieldState: { error, isTouched },
        formState: { isSubmitting },
      }) => (
        <>
          <TextField
            autoComplete="off"
            sx={{ width: '100%', ...sx }}
            onChange={(event) => {
              onChange(
                valueAsNumber ? Number(event.target.value) : event.target.value
              );
              if (isFunction(complementaryOnChangeCallback))
                complementaryOnChangeCallback(event.target.value);
            }}
            {...rest}
            onInput={onChange}
            {...field}
            inputRef={ref}
            InputProps={{
              inputProps: {
                style: {
                  minHeight: '10px',
                },
                ...(useNumericFormatter
                  ? // @NB: NumericFormat accepts props named `thousandSeparator` and `decimalSeparator` (returned by getLocaleNumberSeparators)
                    getLocaleNumberSeparators(locale)
                  : {}),
              },
              startAdornment: searchBar ? (
                <InputAdornment position="start">
                  <SearchIcon color="primary" />
                </InputAdornment>
              ) : undefined,
              inputComponent: useNumericFormatter
                ? (CustomNumericFormat as any)
                : undefined,
              ...defaultTo(rest?.InputProps, {}),
            }}
            type={searchBar ? 'search' : undefined}
            inputMode={searchBar ? 'search' : undefined}
          />
          {!isSubmitting && isTouched ? (
            <Typography color="error">{t(error?.message)}</Typography>
          ) : null}
        </>
      )}
    />
  );
};

[hasan-ceo]

Hi @bluebill1049
My Yup code:

const schema = yup.object({
  amount: yup
    .number()
    .min(0, "Must be greater than or equal to 0")
    .typeError("Positive number required")
}); 

My controller code:

<Controller
        render={({ field }) => (
          <NumericFormat
            thousandSeparator
            {...field}
          />
        )}
        name="amount"
        control={control}
      />

Getting error: Positive number required

[drewk]

You're probably getting a type error because of the comma in the field value. I think you might need to add a transform to your yup schema to format the input value to a valid number. I haven't done this myself but here is the relevant doc: https://github.com/jquense/yup#schematransformcurrentvalue-any-originalvalue-any--any-schema
Hope that helps.

[vaidikChouhan]

.transform((value, originalValue) =>
parseFloat(String(originalValue || 0).replace(/,/g, ''));
) paste this in your schema

[bpeter340]

I can get the input field state, but validation only works for empty fields despite character length checks. What could be the issue here? @bluebill1049

Yup Schema

  const schema = Yup.object().shape({
    phone_number: Yup.string()
      .required('Phone Number is required')
      .length(12, 'Must be a valid phone number (10 digits)'),
  })

Controller

<Controller
    name="phone_number"
    control={control}
    render={({ field, fieldState }) => (
      <PatternFormat
        {...field}
        label="Phone Number"
        customInput={TextField}
        type="tel"
        format="###-###-####"
        autoComplete="off"
        fullWidth
        error={!!fieldState.error?.message}
        helperText={fieldState.error?.message}
      />
    )}
  />

[leapful]

@bpeter340

Please open a new discussion with codesandbox url to re-produce the issue since this current discussion is in long time ago and might be not valid with latest version of react-hook-form.