shadcn-phone-input

https://shadcn-phone-input.vercel.app
Admin
An implementation of a Phone Input component for React, built on top of shadcn UI's input component....
Tokens:881
Snippets:4
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize Shadcn UI

Source: https://shadcn-phone-input.vercel.app/index

Command to initialize the Shadcn UI CLI in your project. This sets up the necessary configuration for using Shadcn components.

```bash
npx shadcn@latest init
```

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

### Install React Phone Number Input Package

Source: https://shadcn-phone-input.vercel.app/index

Command to install the core react-phone-number-input package using npm. This package provides the functionality for the phone input component.

```bash
npm install react-phone-number-input
```

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

### Add Shadcn UI Components

Source: https://shadcn-phone-input.vercel.app/index

Commands to add specific Shadcn UI components to your project. These commands fetch and integrate the component code into your project structure.

```bash
npx shadcn@latest add input
npx shadcn@latest add button
npx shadcn@latest add command
npx shadcn@latest add toast
npx shadcn@latest add popover
npx shadcn@latest add scroll-area
```

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

### React Country Select Option Component

Source: https://shadcn-phone-input.vercel.app/index

Defines the UI for a single country option within a select dropdown. It displays the country flag, name, calling code, and a checkmark if it's the selected country. It handles user selection by updating the parent component's state and triggering a completion callback.

```typescript
import React from 'react';
import { CommandItem } from '@/components/ui/command';
import { CheckIcon } from '@radix-ui/react-icons';
import { RPNInput } from './RPNInput'; // Assuming RPNInput is imported from a local file

// Define props for the CountrySelectOption component
interface CountrySelectOptionProps {
  country: RPNInput.Country;
  countryName: string;
  selectedCountry: RPNInput.Country;
  onChange: (country: RPNInput.Country) => void;
  onSelectComplete: () => void;
}

// Define props for the FlagComponent
interface FlagComponentProps {
  country: RPNInput.Country;
  countryName: string;
}

// Placeholder for flags object, assuming it's defined elsewhere
// const flags: { [key: string]: React.ComponentType<any> } = {};

// Component to display the country flag
const FlagComponent = ({ country, countryName }: FlagComponentProps) => {
  // Assuming 'flags' is an object mapping country codes to flag components
  // const Flag = flags[country]; 
  // For demonstration, let's assume a dummy Flag component or import mechanism
  const Flag = ({ title }: { title: string }) => (
    <span className="text-xs">{title.substring(0, 2).toUpperCase()}</span>
  );

  return (
    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg:not([class*='size-'])]:size-full">
      {Flag && <Flag title={countryName} />}
    </span>
  );
};

// Component for a single country option in the select dropdown
const CountrySelectOption = ({ 
  country, 
  countryName, 
  selectedCountry, 
  onChange, 
  onSelectComplete 
}: CountrySelectOptionProps) => {
  const handleSelect = () => {
    onChange(country);
    onSelectComplete();
  };

  return (
    <CommandItem className="gap-2" onSelect={handleSelect}>
      <FlagComponent country={country} countryName={countryName} />
      <span className="flex-1 text-sm">{countryName}</span>
      <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
      <CheckIcon
        className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
      />
    </CommandItem>
  );
};

// Assuming PhoneInput is exported from this file or a related one
// export { PhoneInput }; 

// Exporting components for potential use
export { CountrySelectOption, FlagComponent };

```
Tokens:
Raw