Add custom input component prop

[gabrielalmeida]

This allows rendering a customized input component. If a component prop is found, it will omit default className applied to avoid custom component styles conflicting with the default ones.

              <PhoneInput
                country={'us'}
                preferredCountries={['us']}
                placeholder="Phone"
                value={user.phone}
                component={CustomFancyInput}
              />

Related to #113. I believe it's the simplest approach to implement this, by allowing the consumer to bypass the default input entirely without losing any functionality.

[bl00mber]

I've tried to make a test work but no success. Can you make it work?

describe('misc', () => {
  it('renders custom input component', () => {
    const Input = () => <input name="test" />

    const { container: phoneInput } = render(
      <PhoneInput
        value="+49 1701 601234"
        component={Input}
      />)

    expect(phoneInput.querySelector('.form-control').value).toBe('+49 1701 601234')
    expect(phoneInput.querySelector('.form-control').name).toBe('test')
  })
})

[gabrielalmeida]

Hi, @bl00mber!

When passing a component as a prop this PR removes the default className, which means there are no .form-control classes in the DOM. There are some options we could consider, let me know which one you think is the most adequate for this project:

1. Use idiomatic react-testing-library Queries to find the element instead of querySelect'ing.
2. Accept a custom className prop, so querySelector is possible.
3. Add a headless(unstyled) class, so no style conflicts arise while querySelector is still possible.

Thanks for this lib ;)

[gottfrois]

Any updates here?

[bl00mber]

@gabrielalmeida can you please explain more detailed, I do not understand why this PR removes className. The preferred approach is to preserve existing functionality without adding new libraries and default classes should be added in a way that do not requires user to manually insert it. Probably this may include adding a conditional to allow user to turn off default props in custom input?

[ismatim]

@bl00mber: I really love this helpful library, my questions are: do you think we can move forward with these changes or should it be rejected? Could you clarify please? thanks for your time and effort here since the beginning.