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

5 messages · Page 1 of 1 (latest)

shut belfry
#

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?

hearty windBOT
mild bluff
#

@elder matrix @graceful compass did I see ppl working on a npm package with fields like this?

graceful compass
hearty windBOT