Improve docs

[AndryOre]

I think the docs should be improved because it is a bit confusing how the api works.
Specifically, I am confused about the styles.

            <PhoneInput
              countrySelectorStyleProps={{ buttonClassName: 'px-2' }}
              defaultCountry="us"
              inputClassName={`w-full ${isValid ? '' : 'border-red-500'}`}
              onChange={(e) => {
                handlePhoneNumber(e);
              }}
              inputProps={{
                onBlur: () => {
                  isPhoneValid(`+${phoneNumber}`);
                },
              }}
            />

I'm trying to access 'listItemClassName' and I can't access it.
It would be nice to have examples.

[viheag]

Same, I would like to know how to use it with react-hook-form

[goveo]

@AndryOre Sorry for the late response.
Yea, this part is not well written, I'll add styling examples when I have time, thanks!

You can access it in this way:

<PhoneInput
  countrySelectorStyleProps={{
    dropdownStyleProps: {
      listItemClassName: 'some-class-name',
    },
  }}
/>

[goveo]

Same, I would like to know how to use it with react-hook-form

@viheag You can use the storybook story code as an example for now:
https://github.com/goveo/react-international-phone/blob/master/src/stories/Validation.stories.tsx#L69

I will update the docs with some examples when I have time, thanks!