styling help

[Abdelrahman Abdelfattah]

Hi i am using tailwind and react but get conflicted when tired to style the input to be like this one

      <div className="relative">
        <select
          id={props.lable.id}
          className="w-full appearance-none rounded-lg border px-4 py-2 pl-8 text-black shadow focus:border-[#305DAB] focus:outline-none"
        >
          {props.children}
        </select>
        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center px-3 text-gray-700">
          <i class="fal fa-angle-down"></i>
        </div>

its rtl website

[Nikolay]

Hi. Looks like this component doesn't support "rtl" feature. A workaround could be rendering "country select" and "phone input" as separate fields. That would mean creating a custom country select component and using react-phone-number-input/input component.

[Abdelrahman Abdelfattah]

@catamphetamine can give some examples

[Nikolay]

https://github.com/catamphetamine/react-phone-number-input#without-country-select

"Creating a custom country <select/>"

import PropTypes from 'prop-types'
import { getCountries, getCountryCallingCode } from 'react-phone-number-input'

const CountrySelect = ({ value, onChange, labels, ...rest }) => (
  <select
    {...rest}
    value={value}
    onChange={event => onChange(event.target.value || undefined)}>
    <option value="">
      {labels['ZZ']}
    </option>
    {getCountries().map((country) => (
      <option key={country} value={country}>
        {labels[country]} +{getCountryCallingCode(country)}
      </option>
    ))}
  </select>
)

CountrySelect.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  labels: PropTypes.objectOf(PropTypes.string).isRequired
}

import PhoneInput from 'react-phone-number-input/input'
import en from 'react-phone-number-input/locale/en'
import CountrySelect from './CountrySelect'

function Example() {
  const [country, setCountry] = useState('US')
  const [value, setValue] = useState()
  return (
    <div>
      <CountrySelect
        labels={en}
        value={country}
        onChange={setCountry}/>
    </div>
    <div>
      <PhoneInput
        country={country}
        value={value}
        onChange={setValue}/>
    </div>
  )
}

[Abdelrahman Abdelfattah]

thanks