@abdulselam/phone-input-free-syria

React phone input component with the new Free Syria independence flag (2025) 🇸🇾

A drop-in replacement for react-phone-input-2 that replaces the outdated Ba'athist flag with the correct Syrian independence flag — green, white, and black stripes with three red stars.

Installation

npm install @abdulselam/phone-input-free-syria

Usage

import PhoneInput from '@abdulselam/phone-input-free-syria';
import '@abdulselam/phone-input-free-syria/style.css';

export default function MyForm() {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      country="sy"
      value={phone}
      onChange={(value) => setPhone(value)}
    />
  );
}

Props

This component accepts all the same props as react-phone-input-2.

| Prop | Type | Default | Description | |------|------|---------|-------------| | country | string | "sy" | Default selected country code | | value | string | "" | Phone number value | | onChange | (value, data) => void | — | Called when value changes | | placeholder | string | — | Input placeholder text | | disabled | boolean | false | Disable the input | | enableSearch | boolean | false | Enable country search | | preferredCountries | string[] | — | Countries shown at top of list |

For the full list of props, see the react-phone-input-2 documentation.

Example with common options

import PhoneInput from '@abdulselam/phone-input-free-syria';
import '@abdulselam/phone-input-free-syria/style.css';

<PhoneInput
  country="sy"
  value={phone}
  onChange={setPhone}
  enableSearch={true}
  preferredCountries={['sy', 'sa', 'jo', 'lb']}
  placeholder="أدخل رقم الهاتف"
/>

About the flag

The Syrian independence flag was the official flag of Syria from 1932 and was re-adopted in December 2024 following the fall of the Assad regime. It features:

• 🟩 Green stripe (top) — #007A3D
• ⬜ White stripe (middle) — #FFFFFF
• ⬛ Black stripe (bottom) — #000000
• ⭐⭐⭐ Three red stars — #CE1126

License

MIT © abdulselam