@jbenbrahim/phone-input

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

Installation

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

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

function MyComponent() {
  const [phoneNumber, setPhoneNumber] = useState<string | undefined>('');

  return (
    <CustomPhoneInput
      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

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

0.1.2

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

0.1.1

• Initial release