How do I integrate React hook form with NumberFormat (react-number-format)?

Question

I am trying to use React hook form with NumberFormat without Controller and without ReactDOM.findDOMNode (which is deprecated and discouraged). The following code works

import React from 'react';
import ReactDOM from 'react-dom';
import { useForm } from 'react-hook-form';
import NumberFormat from 'react-number-format';

function FormWorking() {
  const { register, handleSubmit, getValues } = useForm();

  function onSubmit() {
    console.log(getValues());
  }

  const cardNumberReg = register('cardNumber');
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={(inst) => (cardNumberReg.ref(ReactDOM.findDOMNode(inst)))}
      />
    </form>
  );
}

ReactDOM.render(
  <FormWorking />, document.getElementById('root')
);

but I don't want to use findDOMNode. None of the below attempts is working (cardNumber is blank or undefined in the log)

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          getInputRef={(e: any) => (cardNumberReg.ref(e))}
      />

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={cardNumberReg.ref}
      />

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={(e) => cardNumberReg.ref(e)}
      />

I am new to react and any help would be greatly appreciated.

jean182 · Accepted Answer · 2021-09-20 16:48:53Z

16

My take on this is to use the Controller component from react hook form, in that case you are handling the NumberFormat as a controlled component, you need to do something like this:

import { useForm, Controller } from "react-hook-form";
import NumberFormat from "react-number-format";

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="cardNumber"
        render={({ field: { onChange, name, value } }) => (
          <NumberFormat
            format="#### #### #### ####"
            name={name}
            value={value}
            onChange={onChange}
          />
        )}
      />
      <input type="submit" />
    </form>
  );
}

Basically you need to pass the control value coming from the useForm() function and give the Controller a name, in your case is cardNumber, after that you will use a render function in the Controller, where your NumberFormat controller will be used, notice that the render prop is a function that gives you all the necessary values in order to make your input work, like the onChange, the value and the name. You can take a look at the docs to see all the available props.

Keep in mind that normally you want to use the register function for every input, but there are cases with UI libraries that using the Controller to make the input controlled is the best idea

Also here's a sandbox with a working example.

answered Sep 20, 2021 at 16:48

jean182

3,5332 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Over a year ago

I was hoping for a solution using uncontrolled components which is a main selling point of react hook form but I think you are right that the solution you provided is the best way for these two libraries to integrate. I appreciate your time answering this question.

AlexZvl Over a year ago

how do I pass ref to NumberFormat? I think it is still needed for reset function to work?

jean182 Over a year ago

@AlexZvl you have two options, one is to pass in the reset the value like this reset({ "cardNumber": "" }), or explicitly call setValue like this: setValue("cardNumber", "")

Ragen Dazs Over a year ago

Saved me a couple of hours! Thanks

Collectives™ on Stack Overflow

How do I integrate React hook form with NumberFormat (react-number-format)?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related