Closed abdo-spices closed 1 year ago
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.
@catamphetamine can give some examples
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>
)
}
thanks
Hi i am using tailwind and react but get conflicted when tired to style the input to be like this one
its rtl website