Реалізація вибору регіону/країни користувачем на сайті

Реалізація виб ору регіону/країни користувачем на сайті

Вибір країни або регіону — елемент, який зустрічається в реєстраційних формах, налаштуваннях профілю, фільтрах каталогу та лендингах з локалізованим контентом. Реалізація залежить від кількості варіантів та сценарію використання.

Варіанти реалізації

<select> з повним списком країн — найпростіший спосіб. Достатньо для форм, де геовибір не критичний. Недоліки: 200 країн у звичайному дропдауні неручно листати.

Searchable dropdown — поле введення + фільтрований список. Бібліотеки: react-select, downshift, headlessui Combobox. Оптимально для більшості випадків.

Флаги + код країни — для телефонних форм, де користувач вибирає код (+1, +44). Бібліотека react-phone-number-input вирішує цю задачу в комплексі.

Карта — для вибору регіону всередині країни. Реалізується через SVG-карту або Leaflet/Mapbox з кліцаними полігонами.

Searchable dropdown на прикладі React

import { Combobox } from '@headlessui/react';
import { useState } from 'react';
import { countries } from './countries-data'; // ISO 3166-1 список

function CountrySelector({ value, onChange }) {
  const [query, setQuery] = useState('');

  const filtered = query.length < 1
    ? countries
    : countries.filter(c =>
        c.name.toLowerCase().includes(query.toLowerCase()) ||
        c.code.toLowerCase().includes(query.toLowerCase())
      );

  return (
    <Combobox value={value} onChange={onChange}>
      <Combobox.Input
        onChange={e => setQuery(e.target.value)}
        displayValue={c => c?.name ?? ''}
        placeholder="Виберіть країну"
        className="country-input"
      />
      <Combobox.Options className="country-dropdown">
        {filtered.length === 0 && query.length > 0 ? (
          <div className="country-empty">Країна не знайдена</div>
        ) : (
          filtered.map(country => (
            <Combobox.Option key={country.code} value={country}>
              {({ active }) => (
                <div className={`country-option ${active ? 'active' : ''}`}>
                  <img
                    src={`/flags/${country.code.toLowerCase()}.svg`}
                    width={20}
                    alt=""
                    aria-hidden
                  />
                  {country.name}
                  <span className="country-code">{country.code}</span>
                </div>
              )}
            </Combobox.Option>
          ))
        )}
      </Combobox.Options>
    </Combobox>
  );
}

Дані: звідки брати список країн

• Статичний JSON — файл з ISO 3166-1 (код, назва на потрібних мовах, dial-код). Пакет world-countries (~180 KB) або власний облегшений список
• REST Countries API — https://restcountries.com/v3.1/all — актуальні дані, але зовнішня залежність
• База на сервері — таблиця countries з перекладами, фільтрація за активними регіонами доставки

Автоопредилення по IP

Передустанавлювати країну за геолокацією — поліпшує UX, але потребує бекенду:

// Laravel + Torann/GeoIP або MaxMind
public function detectCountry(Request $request): JsonResponse
{
    $geo = geoip()->getLocation($request->ip());
    return response()->json([
        'country_code' => $geo->iso_code,
        'country_name' => $geo->country,
    ]);
}

На фронте:

useEffect(() => {
  fetch('/api/geo/country')
    .then(r => r.json())
    .then(geo => {
      const detected = countries.find(c => c.code === geo.country_code);
      if (detected && !value) onChange(detected); // тільки якщо не вибрано вручну
    });
}, []);

Терміни

Searchable dropdown з флагами, пошуком та автоопреділенням по IP — 1–2 робочих дні.