How do I use a React phone number field (react-phone-number-input) or something similar?

default discord avatar
cadebryant9 months ago
3

I am trying to use React's

react-phone-number-input

, as follows:



{
  name: 'phone',
  label: 'Phone',
  type: 'ui',
  admin {
    width: '50%',
    components: {
      Field: PhoneInput
    }
  }
}

At the top of my file I have:


import PhoneInput from 'react-phone-number-input'
import 'react-phone-number-input/styles.css'

But it gives this error in the browser console:


Warning: failed prop type: the prop 'onChange' is marked as required in 'ForwardRef', but its value is 'undefined'.

My understanding is that I need to pass in my own

onChange

handler. But I'm not sure how to do this. Shouldn't this component have its own default

onChange

handler? Am I really required to roll my own?



I was hoping this component would be more "plug and play". If this is not the case, can someone please either


provide me a working snippet of

react-phone-number-input

being used within a Payload app? Or perhaps suggest an alternative component that is simpler to plug into Payload?

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.