/Javascript/React/Insert isValidPhoneNumber in react hook form

Insert isValidPhoneNumber in react hook form

import { useForm, Controller } from 'react-hook-form'
import PhoneInput, { isValidPhoneNumber } from 'react-phone-number-input'

import 'react-phone-number-input/style.css'

const MyForm = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="user-info-form">
      <div>
        <label htmlFor="phone-input">Phone Number</label>
        <Controller
          name="phone-input"
          control={control}
          rules={{ required: true }}
          render={({ field: { onChange, value } }) => (
            <PhoneInput
              value={value}
              onChange={onChange}
              defaultCountry="TH"
              id="phone-input"
            />
          )}
        />
        {errors.phone && <p className="error-message">Invalid Phone</p>}
      </div>
    </form>
  )
}

export default MyForm

Source: stackoverflow.com

Similar codes

0 vote312 views1 answer
TrackPromise React
Javascript React
24 votes277 views3 answers
Set port in react app
Javascript React
5 votes295 views2 answers
Svg react native
Javascript React
1 vote287 views1 answer
Import react js video player
Javascript React
0 vote294 views1 answer
React i18n with parameeter
Javascript React
0 vote303 views1 answer
How to embed an expression in react js
Javascript React
0 vote322 views1 answer
Adding js file to reactjs
Javascript React
11 votes304 views2 answers
React must be in scope when using jsx
Javascript React
40 votes306 views4 answers
On click copy to clipboard react
Javascript React
-1 vote307 views1 answer
React time picker
Javascript React