Country Selector with Flags 🌍

Un componente React moderno para selección de países con banderas y soporte multiidioma.

✨ Características

• 🚀 Plug & Play - Solo instala y usa, sin configuración adicional
• 🌍 195+ países incluidos
• 🏳️ Banderas SVG de alta calidad
• 🌐 Multiidioma (Inglés y Español)
• 🎨 Totalmente personalizable
• 📱 Responsive y accesible
• 🔍 Búsqueda integrada
• ⚡ TypeScript incluido
• 🎯 No requiere shadcn/ui

📦 Instalación

npm install country-selector-with-flags

¡Eso es todo! No necesitas instalar shadcn/ui ni configuraciones adicionales.

🚀 Uso Básico

import { CountrySelect } from "country-selector-with-flags";
import { useState } from "react";

function App() {
  const [country, setCountry] = useState("");

  return (
    <CountrySelect
      value={country}
      onValueChange={setCountry}
      placeholder="Selecciona un país..."
      language="es"
    />
  );
}

🎛️ Props

| Prop | Tipo | Default | Descripción | | --------------- | ------------------------- | --------------------- | ------------------------------------------------- | | value | string | "" | Código del país seleccionado (ISO 3166-1 alpha-2) | | onValueChange | (value: string) => void | - | Callback cuando cambia la selección | | placeholder | string | "Select country..." | Texto placeholder | | language | "en" \| "es" | "en" | Idioma de los nombres de países | | showFlag | boolean | true | Mostrar banderas | | disabled | boolean | false | Deshabilitar el componente | | className | string | - | Clases CSS adicionales |

🌐 Idiomas Soportados

• Inglés (en) - Nombres en inglés
• Español (es) - Nombres en español

🎨 Ejemplos

Básico con español

<CountrySelect
  value={country}
  onValueChange={setCountry}
  language="es"
  placeholder="Selecciona tu país"
/>

Sin banderas

<CountrySelect value={country} onValueChange={setCountry} showFlag={false} />

Personalizado

<CountrySelect
  value={country}
  onValueChange={setCountry}
  className="w-full max-w-md"
  placeholder="Choose your country"
  language="en"
/>

Deshabilitado

<CountrySelect value={country} onValueChange={setCountry} disabled={true} />

🔧 Requisitos

• React >= 16.8.0
• Tailwind CSS (para estilos)

🎯 Ventajas

• ✅ Standalone - No requiere shadcn/ui
• ✅ Ligero - Solo ~8 dependencias esenciales
• ✅ Fácil instalación - Un solo comando
• ✅ TypeScript - Tipado completo incluido
• ✅ Accesible - Cumple estándares WCAG
• ✅ Responsive - Funciona en móvil y desktop

📄 Licencia

MIT © linder3hs