React hook form number control

App.tsx

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

const re = /^[-+]?\d*(\.\d*)?$/;

function NumCtrl({ name, onChange, value }: any) {
  return <input
    name={name}
    value={value}
    onChange={(e) => {
      if (re.test(e.target.value)) onChange(e);
    }}
    type="text"
  />
}

function App() {
  const { handleSubmit, control } = useForm();

  const onSubmit = (data: any) => {
    console.log("form submitted: ", data);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>NumCtrl example</h1>
      <Controller
        name="value"
        control={control}
        defaultValue="0"
        render={({ field: { ref, ...rest } }) => (
          <NumCtrl {...rest} />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export default App