catamphetamine / react-phone-number-input

React component for international phone number input
http://catamphetamine.gitlab.io/react-phone-number-input/
MIT License
914 stars 194 forks source link

Unable to add className to input #353

Closed SG-DEV-FE closed 4 years ago

SG-DEV-FE commented 4 years ago

First thank you for the awesome plugin. My issue is I am trying to add the form-control className to the input but I can't seem to get it to work.

I am using forward ref to assist in this, Any help you can give would be great

let PhoneInputStyle = () => {
      return (
        <input
          className='form-control'
          National={value && formatPhoneNumber(value)}
          International={value && formatPhoneNumberIntl(value)}
          value={value}
          onChange={(value) => this.setState({ value })}
          useNationalFormatForDefaultCountryValue
          limitMaxLength
          autoComplete
          required></input>
      );
    };    
    PhoneInputStyle = React.forwardRef(PhoneInputStyle);

<FormGroup>
                              <PhoneInput
                                inputComponent={PhoneInputStyle}
                                name='Phone'

                                defaultCountry={countryTel}
                                countryOptionsOrder={[
                                  'GB',
                                  'US',
                                  'AU',
                                  '|',
                                  '...',
                                ]}

                                flags={flags}

                                // required
                              />
                              <small className='text-danger'>
                                {value &&
                                  (isValidPhoneNumber(value)
                                    ? undefined
                                    : 'Invalid phone number')}
                              </small>

                              <div className='invalid-feedback' />
                            </FormGroup>`
catamphetamine commented 4 years ago

My issue is I am trying to add the form-control className to the input but I can't seem to get it to work.

No reason for it to not work. See if PhoneInputStyle is being rendered. If it is, then the component is working.

SG-DEV-FE commented 4 years ago

All I want to do is pass the className - form-control to the input