7 методов добавления селектора флага страны к вводу номера телефона в React - Fcodenotes

В современных веб-приложениях часто необходимо включать ввод номера телефона в селектор флага страны, чтобы улучшить взаимодействие с пользователем и обеспечить точное форматирование номера телефона. В этой статье мы рассмотрим семь различных методов добавления селектора флага страны к вводу номера телефона в приложении React. Мы предоставим примеры кода для каждого метода, которые помогут вам реализовать его в ваших проектах.

Метод 1: пакет React-Flags-Select
Пакет React-Flags-Select — популярный выбор для добавления селектора флага страны к вводу номера телефона в React. Он предоставляет простой и настраиваемый раскрывающийся список с флагами разных стран.

Установка:

npm install react-flags-select

Пример кода:

import ReactFlagsSelect from 'react-flags-select';
import 'react-flags-select/css/react-flags-select.css';
function PhoneNumberInput() {
  const handleSelect = (countryCode) => {
    // Handle selected country code
  };
  return (
    <div>
      <ReactFlagsSelect onSelect={handleSelect} />
      <input type="tel" />
    </div>
  );
}

Метод 2: пакет Country-Region-Selector
Пакет Country-Region-Selector обеспечивает более комплексное решение, которое включает не только флаги стран, но и выбор региона. Он предлагает поле ввода с функцией поиска с опережением ввода и поддерживает несколько языков.

Установка:

npm install country-region-selector

Пример кода:

import CountryRegionSelector from 'country-region-selector';
function PhoneNumberInput() {
  const handleSelect = (country, region) => {
    // Handle selected country and region
  };
  return (
    <div>
      <CountryRegionSelector onSelect={handleSelect} />
      <input type="tel" />
    </div>
  );
}

Метод 3: пользовательские флаги SVG
Если вы предпочитаете использовать собственные флаги SVG вместо того, чтобы полагаться на внешние пакеты, вы можете создать свой собственный компонент выбора флага. Вот пример того, как это можно реализовать:

import React, { useState } from 'react';
const countries = [
  { code: 'us', name: 'United States' },
  { code: 'gb', name: 'United Kingdom' },
  // Add more countries...
];
function PhoneNumberInput() {
  const [selectedCountry, setSelectedCountry] = useState(countries[0]);
  const handleSelect = (country) => {
    setSelectedCountry(country);
  };
  return (
    <div>
      <select onChange={(e) => handleSelect(countries.find(c => c.code === e.target.value))}>
        {countries.map(country => (
          <option key={country.code} value={country.code}>{country.name}</option>
        ))}
      </select>
      <input type="tel" />
      <img src={`/flags/${selectedCountry.code}.svg`} alt={selectedCountry.name} />
    </div>
  );
}

Метод 4: Пакет React-Intl-Tel-Input
Пакет React-Intl-Tel-Input — это мощное решение, которое сочетает в себе ввод номера телефона с выбором и проверкой флага страны. Он предлагает полнофункциональный компонент ввода международных номеров телефонов для React.

Установка:

npm install react-intl-tel-input

Пример кода:

import React from 'react';
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
function PhoneNumberInput() {
  const handleSelect = (telNumber, selectedCountry) => {
    // Handle selected phone number and country
  };
  return (
    <IntlTelInput
      preferredCountries={['us', 'gb']}
      onSelect={handleSelect}
    />
  );
}

Метод 5: пользовательские флаги CSS
Другой подход — использовать пользовательские флаги CSS в сочетании с раскрывающимся списком выбора. Вы можете создать класс CSS для каждого флага страны и динамически применять его в зависимости от выбранной страны.

import React, { useState } from 'react';
const countries = [
  { code: 'us', name: 'United States' },
  { code: 'gb', name: 'United Kingdom' },
  // Add more countries...
];
function PhoneNumberInput() {
  const [selectedCountry, setSelectedCountry] = useState(countries[0]);
  const handleSelect = (country) => {
    setSelectedCountry(country);
  };
  return (
    <div>
      <select onChange={(e) => handleSelect(countries.find(c => c.code === e.target.value))}>
        {countries.map(country => (
          <option key={country.code} value={country.code}>{country.name}</option>
        ))}
      </select>
      <input type="tel" />
      <span className={`flag-icon flag-icon-${selectedCountry.code}`} />
    </div>
  );
Method 6: React-Select Package with Flag Icons
If you want to use a more versatile dropdown component with flag icons, you can leverage the React-Select package along with flag icon libraries like react-icons or flag-icon-css.
Installation:
```bash
npm install react-select react-icons

Пример кода:

import React, { useState } from 'react';
import Select from 'react-select';
import { FiFlag } from 'react-icons/fi'; // Replace with your chosen flag icon library

const countryOptions = [
  { value: 'us', label: 'United States' },
  { value: 'gb', label: 'United Kingdom' },
  // Add more countries...
];

function PhoneNumberInput() {
  const [selectedCountry, setSelectedCountry] = useState(null);

  const handleSelect = (selectedOption) => {
    setSelectedCountry(selectedOption);
  };

  return (
    <div>
      <Select
        options={countryOptions}
        value={selectedCountry}
        onChange={handleSelect}
        isClearable
        getOptionLabel={(option) => (
          <div>
            <FiFlag className={`flag-icon flag-icon-${option.value}`} />
            <span>{option.label}</span>
          </div>
        )}
      />
      <input type="tel" />
    </div>
  );
}

Метод 7: Пакет React-Phone-Input-2
Пакет React-Phone-Input-2 предоставляет компонент ввода, специально разработанный для телефонных номеров. Он включает в себя функции выбора, проверки и форматирования флага страны.
Установка:

npm install react-phone-input-2

Пример кода:

import React, { useState } from 'react';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

function PhoneNumberInput() {
  const [phoneNumber, setPhoneNumber] = useState('');

  const handleOnChange = (value) => {
    setPhoneNumber(value);
  };

  return (
    <PhoneInput
      country={'us'}
      value={phoneNumber}
      onChange={handleOnChange}
    />
  );
}

В этой статье мы рассмотрели семь различных методов добавления селектора флага страны к вводу номера телефона в приложении React. Мы рассмотрели популярные пакеты, такие как React-Flags-Select и React-Intl-Tel-Input, а также пользовательские реализации с использованием флагов SVG, флагов CSS и пакета React-Select. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и наслаждайтесь улучшенным пользовательским интерфейсом и точным форматированием номеров телефонов в ваших приложениях React.