### Run Development Server (Bash)

Source: https://github.com/siamahnaf/react-simple-phone-input/blob/main/apps/docs/README.md

Commands to start the development server for the Next.js project using different package managers. Opens the application at http://localhost:3000.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install React Simple Phone Input

Source: https://github.com/siamahnaf/react-simple-phone-input/blob/main/packages/react/README.md

Installs the 'react-simple-phone-input' package using pnpm. This is the first step to integrate the phone input component into your React project.

```shell
pnpm i react-simple-phone-input
```

--------------------------------

### Create Controlled Phone Input with Value Prop

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Implement a controlled Phone Input component by managing its value externally using the `value` prop and the `onChange` handler. This pattern is essential for integrating with form libraries, pre-populating input fields, or synchronizing the phone number state across different parts of your application. The example demonstrates how to extract and manage the local number part of the phone input.

```tsx
import { useState } from "react";
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function ControlledPhoneInput() {
  const [phoneValue, setPhoneValue] = useState("5551234567");

  const handleChange = (data: PhoneInputResponseType) => {
    // Extract just the local number (without dial code) for controlled state
    const localNumber = data.valueWithoutPlus.replace(
      data.dialCode.replace("+", ""),
      ""
    );
    setPhoneValue(localNumber);
  };

  return (
    <div>
      <PhoneInput
        country="US"
        placeholder="Enter phone number"
        onChange={handleChange}
        value={phoneValue}
      />
      <button onClick={() => setPhoneValue("")}>Clear</button>
      <button onClick={() => setPhoneValue("9876543210")}>Set Demo Number</button>
    </div>
  );
}
```

--------------------------------

### Basic Usage of React Phone Input Component

Source: https://github.com/siamahnaf/react-simple-phone-input/blob/main/packages/react/README.md

Demonstrates the basic implementation of the PhoneInput component in a React application. It includes importing necessary modules and setting initial props like country and placeholder. The onChange handler logs the returned data.

```jsx
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

<PhoneInput
    country="US"
    placeholder="Add your phone"
    onChange={(data: PhoneInputResponseType) => console.log(data)}
/>
```

--------------------------------

### Basic Phone Input Component Usage (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Demonstrates the basic usage of the PhoneInput component in React. It includes setting a default country, placeholder, and handling the onChange event to capture structured phone data.

```tsx
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function ContactForm() {
  const [phone, setPhone] = useState<PhoneInputResponseType | null>(null);

  const handlePhoneChange = (data: PhoneInputResponseType) => {
    console.log(data);
    // Output example:
    // {
    //   country: "United States",
    //   code: "US",
    //   dialCode: "+1",
    //   value: "+15551234567",
    //   valueWithoutPlus: "15551234567"
    // }
    setPhone(data);
  };

  return (
    <form>
      <PhoneInput
        country="US"
        placeholder="Enter your phone number"
        onChange={handlePhoneChange}
      />
      {phone && (
        <p>Full number: {phone.value}</p>
      )}
    </form>
  );
}
```

--------------------------------

### Apply Custom Styling with Classes to Phone Input (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Enables applying custom CSS classes to various elements within the phone input component. This allows for detailed visual control, especially when integrating with CSS frameworks like Tailwind CSS or custom stylesheets.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function StyledPhoneInput() {
  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      containerClass="w-full max-w-md"
      buttonClass="bg-gray-50 hover:bg-gray-100"
      dropdownClass="shadow-xl rounded-lg"
      dropdownListClass="hover:bg-blue-50"
      dropdownIconClass="text-gray-500"
      searchContainerClass="p-2"
      searchInputClass="border-2 border-gray-300 focus:border-blue-500"
      searchIconClass="text-gray-400"
      inputClass="text-lg font-medium"
    />
  );
}

```

--------------------------------

### Customize Icons in Phone Input (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Allows replacement of default dropdown and search icons with custom React components. This facilitates integration with existing icon libraries like Tabler Icons or Heroicons.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import { IconChevronDown, IconSearch } from "@tabler/icons-react";
import "react-simple-phone-input/dist/index.css";

function CustomIconsPhoneInput() {
  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      iconComponent={<IconChevronDown size={20} />}
      searchIconComponent={<IconSearch size={20} />}
    />
  );
}

```

--------------------------------

### Configure Search Functionality in Phone Input (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Customizes the search behavior within the country dropdown. Options include changing the placeholder text, hiding the search field, controlling search icon visibility, and modifying the 'not found' message.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function SearchConfiguredInput() {
  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      search={true}                              // Enable/disable search (default: true)
      showSearchIcon={true}                      // Show/hide search icon (default: true)
      searchPlaceholder="Find your country..."  // Custom search placeholder
      searchNotFound="Country not found"        // Custom not found message
    />
  );
}

```

--------------------------------

### Phone Input with Specific Countries Only (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Demonstrates how to restrict the country selection dropdown to a predefined list of countries using the `onlyCountries` prop. This is useful for regionalized applications.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function RegionalPhoneInput() {
  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      onlyCountries={["US", "CA", "MX"]}  // Only North American countries
    />
  );
}
```

--------------------------------

### Handle Phone Input Changes in React

Source: https://github.com/siamahnaf/react-simple-phone-input/blob/main/packages/react/README.md

The `onChange` event is triggered when the phone input value changes. It provides an object containing detailed information about the input, including country code, dial code, and the full phone number. This is useful for capturing and processing user input.

```javascript
onChange={(data: PhoneInputResponseType) => console.log(data)}
```

--------------------------------

### Customize Phone Input with Inline Styles

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Apply inline React styles directly to the PhoneInput component and its sub-elements using style props. This method is useful for dynamic styling based on component state or when a CSS-in-JS approach is preferred. It allows for granular control over the appearance of the container, button, dropdown, and input fields.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function InlineStyledPhoneInput() {
  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      containerStyle={{ maxWidth: "400px", margin: "0 auto" }}
      buttonStyle={{ backgroundColor: "#f0f0f0", borderRadius: "8px 0 0 8px" }}
      dropdownStyle={{ boxShadow: "0 4px 20px rgba(0,0,0,0.15)" }}
      dropdownListStyle={{ padding: "8px 12px" }}
      inputStyle={{ fontSize: "16px", padding: "12px" }}
      searchContainerStyle={{ padding: "12px" }}
      searchInputStyle={{ borderRadius: "6px" }}
    />
  );
}
```

--------------------------------

### Display Preferred Countries in Phone Input (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Reorders the country list to prioritize specified countries at the top of the dropdown. All other countries remain available below. This prop is useful for quickly accessing frequently used international dialing codes.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function PreferredCountriesInput() {
  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      preferredCountries={["US", "GB", "CA", "AU"]}  // These appear first
    />
  );
}

```

--------------------------------

### Handle Phone Input Response with TypeScript Interface

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Utilize the `PhoneInputResponseType` TypeScript interface to ensure type safety when handling the data returned from the `onChange` event of the PhoneInput component. This interface defines the structure of the response object, allowing for easy and safe access to properties like country name, ISO code, dial code, and various formats of the phone number. This is crucial for robust data handling and API integration.

```tsx
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

// PhoneInputResponseType interface:
// {
//   country: string;        // Full country name (e.g., "United States")
//   code: string;           // ISO 3166-1 alpha-2 code (e.g., "US")
//   dialCode: string;       // International dial code (e.g., "+1")
//   value: string;          // Complete phone with + prefix (e.g., "+15551234567")
//   valueWithoutPlus: string; // Complete phone without + (e.g., "15551234567")
// }

function TypedPhoneHandler() {
  const handleSubmit = (phoneData: PhoneInputResponseType) => {
    // Access typed properties
    const payload = {
      phoneNumber: phoneData.value,
      countryCode: phoneData.code,
      country: phoneData.country,
    };

    console.log("Submitting:", payload);
    // API call with typed data
  };

  return (
    <PhoneInput
      country="US"
      placeholder="Enter phone number"
      onChange={handleSubmit}
    />
  );
}
```

--------------------------------

### Phone Input Excluding Specific Countries (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Illustrates how to exclude certain countries from the dropdown list using the `excludeCountries` prop. This prop takes precedence over `onlyCountries` and filters the full country list.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function FilteredPhoneInput() {
  return (
    <PhoneInput
      country="GB"
      placeholder="Enter phone number"
      onChange={(data) => console.log(data)}
      dialCodeInputField={true}
      excludeCountries={["AF", "KP", "IR"]}  // Exclude specific countries
    />
  );
}
```

--------------------------------

### Control Disabled States in Phone Input (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Manages the interactivity of the phone input component's elements. `disableDropdownOnly` locks country selection while keeping the input active, while `disableInput` can be combined for a fully read-only component.

```tsx
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function DisabledStatesDemo() {
  return (
    <div>
      {/* Dropdown disabled, input enabled */}
      <PhoneInput
        country="US"
        placeholder="Enter phone number"
        onChange={(data) => console.log(data)}
        disableDropdownOnly={true}
        value="5551234567"
      />

      {/* Fully disabled - both dropdown and input */}
      <PhoneInput
        country="US"
        placeholder="Enter phone number"
        onChange={(data) => console.log(data)}
        disableDropdownOnly={true}
        disableInput={true}
        value="5551234567"
      />
    </div>
  );
}

```

--------------------------------

### Phone Input with Dial Code Inside Input Field (React)

Source: https://context7.com/siamahnaf/react-simple-phone-input/llms.txt

Shows how to configure the PhoneInput component to display the country dial code directly within the input field using the `dialCodeInputField` prop. This offers a compact input experience.

```tsx
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/index.css";

function PhoneWithDialCode() {
  return (
    <PhoneInput
      country="US"
      placeholder="Add your phone"
      onChange={(data: PhoneInputResponseType) => {
        // With dialCodeInputField=true, the value starts with the dial code
        // User types: 5551234567
        // data.value returns: "+15551234567"
        console.log("Phone:", data.value);
      }}
      dialCodeInputField={true}
    />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.