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

Есть два возможных способа достижения этой цели: API геолокации или обнаружение геолокации IP. API геолокации показывает всплывающее окно, которое раздражает и пугает одновременно, и многие пользователи просто заблокируют его.

Всплывающее окно API геолокации

Проблема решения для IP-геолокации заключается в том, что JavaScript в браузерах не может получить доступ к IP-адресам пользователей. Однако с помощью серверного API это можно решить. В этой статье будет рассказано, как использовать пакет полей страны и штата React, который поставляется с определением IP-геолокации, не углубляясь в сорняки.


Монтаж

Используемый нами пакет называется react-country-state-fields и чтобы установить его, просто запустите:

npm i react-country-state-fields
Войти в полноэкранный режим

Выйти из полноэкранного режима

Пакет использует материальный пользовательский интерфейс, но если вы не используете материальный пользовательский интерфейс, он все равно будет работать без проблем.


Использование компонентов

В упаковке три компонента:

  • VisitorAPIComponents — это невидимый компонент, который вызывает серверный API для определения геолокации IP-адреса пользователя и установки значений по умолчанию для полей страны и штата на основе геолокации.
  • CountryField — это компонент поля страны, который может брать данные геолокации и автоматически устанавливать страну. Это также удобное поле страны, которое позволяет пользователям выбирать или вводить свои страны.
  • StateField — это компонент поля штата, аналогичный компоненту поля страны, но для уровня штата. Если штаты страны указаны в файле JSON пакета countries.jsonполе будет иметь список состояний, которые пользователи могут выбрать, в противном случае это будет просто открытое текстовое поле, в которое пользователи могут вводить свои состояния.

Привести компоненты в действие очень просто, как в приведенном ниже примере кода.

import { CountryField, StateField, VisitorAPIComponents } from 'react-country-state-fields';
import React, { useState } from 'react';

export const MyForm = () => {
  const [country, setCountry] = useState({code: "", label: ""}); // the selected country
  const [state, setState] = useState({code: "", label: ""}); // the selected state
  const visitorApiPrjectId = ""; // assign your project ID here

  return(
    <VisitorAPIComponents projectId={visitorApiPrjectId} handleCountryChange={(countryObj) => setCountry(countryObj)} handleStateChange={(stateObj) => setState(stateObj)}>
      <CountryField label="Country/Territory"></CountryField>
      <StateField label="State/Province"></StateField>
    </VisitorAPIComponents>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

country а также state Состояния React будут содержать два свойства, называемые code а также label когда API определяет геолокацию пользователя или пользователь изменяет значения поля. code — это код ISO страны или штата, например, «US» для Соединенных Штатов в country штата и «NY» для Нью-Йорка в state государство. Это снимок экрана, когда я загружаю поля в тестовом приложении React.

Поля страны и штата React

Вы можете использовать их в качестве следующего примера кода:

import { CountryField, StateField, VisitorAPIComponents } from 'react-country-state-fields';
import React, { useState } from 'react';

export const MyForm = () => {
  const [country, setCountry] = useState({code: "", label: ""}); // the selected country
  const [state, setState] = useState({code: "", label: ""}); // the selected state
  const visitorApiPrjectId = ""; // assign your project ID here

  return(
    <div>
      <VisitorAPIComponents projectId={visitorApiPrjectId} handleCountryChange={(countryObj) => setCountry(countryObj)} handleStateChange={(stateObj) => setState(stateObj)}>
        <CountryField label="Country/Territory"></CountryField>
        <StateField label="State/Province"></StateField>
      </VisitorAPIComponents>
      Your country is {country !== null && country.label} and your state is {state !== null && state.label}.
    </div>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Включить определение геолокации

Пакет использует серверный API от ПосетительAPI. Есть реквизит с именем projectId которому вам необходимо назначить действительный идентификатор проекта от VisitorAPI, чтобы включить определение геолокации.

Чтобы получить действительный идентификатор проекта, создайте бесплатный план или платный план в зависимости от объема ежемесячных вызовов API. После того, как вы создали план, вы можете увидеть свой идентификатор проекта VisitorAPI на панели управления проекта и использование API. Просто скопируйте и поместите свой идентификатор проекта VisitorAPI и перезагрузите приложение React, в полях будет указана ваша текущая страна и состояние при загрузке.

Поскольку VisitorAPI предназначен для использования во внешнем интерфейсе, ему не нужен ключ API для авторизации вызовов API, поскольку любой ключ будет доступен в Интернете, и это в любом случае противоречит цели наличия ключа. API использует источник запросов API для авторизации вызовов, и вы должны поместить свой домен (например, yourname.com) в список авторизованных доменов в пользовательском интерфейсе настроек проекта вашего проекта VisitorAPI, иначе он будет отклонять ваши вызовы API.


Ресурсы

Репозиторий компонента GitHub:

Пример репозитория GitHub, демонстрирующий использование компонентов: -пример