A React phone input component
npm install @jbenbrahim/phone-inputA React phone input component built on top of react-phone-number-input.
``bash`
npm install @jbenbrahim/phone-input
- ✅ Works with any React project (no Tailwind CSS required)
- ✅ TypeScript support
- ✅ Customizable styling via inline styles
- ✅ Error state support
- ✅ Disabled state
- ✅ Focus states
- ✅ Custom className support
`tsx
import CustomPhoneInput from '@jbenbrahim/phone-input';
function MyComponent() {
const [phoneNumber, setPhoneNumber] = useState
return (
onChange={setPhoneNumber}
placeholder="Enter phone number"
/>
);
}
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | string \| undefined | - | The phone number value (required) |onChange
| | (value: string \| undefined) => void | - | Callback when value changes (required) |onBlur
| | () => void | - | Callback when input loses focus |disabled
| | boolean | false | Disable the input |numberInputClassName
| | string | - | Additional CSS class for the number input |placeholder
| | string | - | Placeholder text |isError
| | boolean | false | Show error state (red border) |className
| | string | - | Additional CSS class for the container |
`tsx`
onChange={setPhoneNumber}
isError={!isValidPhone}
placeholder="Enter phone number"
/>
The component uses inline styles by default, making it work consistently across all projects without requiring Tailwind CSS. The default country is set to "FR" (France).
You can customize the appearance by:
- Passing a className prop for the containernumberInputClassName` prop for the input field
- Passing a
- Wrapping the component in a styled container