@jbenbrahim/phone-input

A React phone input component built on top of react-phone-number-input.

Installation

``bash
npm install @jbenbrahim/phone-input
`

Features

- ✅ 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

Usage

`tsx
import CustomPhoneInput from '@jbenbrahim/phone-input';

function MyComponent() {
const [phoneNumber, setPhoneNumber] = useState('');

return (
value={phoneNumber}
onChange={setPhoneNumber}
placeholder="Enter phone number"
/>
);
}
`

Props

| 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 |

Example with Error State

`tsx
value={phoneNumber}
onChange={setPhoneNumber}
isError={!isValidPhone}
placeholder="Enter phone number"
/>
`

Styling

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 container
- Passing a numberInputClassName` prop for the input field
- Wrapping the component in a styled container

Version History

$3

- Fixed styling issues when used as an npm package
- Converted Tailwind classes to inline styles for better compatibility

$3

- Initial release