В этой статье я поделюсь с вами своим первым пакетом NPM.

RНедавно я разрабатывал веб-приложение для бронирования автобусов, и для этого мне нужны были названия всех марокканских городов.
Я провел небольшое исследование и обнаружил человека, который преобразовал все марокканские города в файл JSON, хотя это было немного сложно использовать.

Поэтому у меня возникла идея создать пакет NPM на основе этого файла JSON.

Давайте посмотрим, как его использовать.

Сначала проверьте этуссылкуи узнайте, как использовать этот пакет.

Или вы можете легко установить его, выполнив следующую команду:

npm install list-of-moroccan-cities
yarn add list-of-moroccan-cities

После установки проверьте пакет. json, вы увидите, что пакет был добавлен в ваше приложение.

Итак, теперь все, что вам нужно сделать, это запросить данные из пакета, и сделать это просто.

// Import cities from list-of-moroccan-cities package
const { cities } = require("list-of-moroccan-cities");

Он вернет массив таких объектов:

Как использовать его с библиотекой React Select?

Если вы заметили, вы увидите, что каждый объект имеет имя идентификатора свойства дерева и метку.

Это очень поможет нам, когда мы будем использовать React Select, так что давайте посмотрим, как это сделать.

Перейдите по этой ссылке, чтобы узнать, как использовать компоненты react-select.

Сначала нам нужно установить react-select с помощью одной из следующих команд:

yarn add react-select

or

npm i --save react-select

После этого воспользуемся реакцией select.

Используйте компонент Async для загрузки параметров из удаленного источника по мере ввода пользователем.

import React from "react";
import AsyncSelect from "react-select/async";

Свойство loadOptions позволяет пользователям выбирать обратный вызов.

Как видите, с помощью компонента AsyncSelect и нашего фантастического пакета NPM теперь мы можем легко искать любые город, который мы хотим.

Заключение.

Это было замечательное путешествие, которое мы только что совершили. Надеюсь, вам понравилось так же, как и мне.
В следующий раз я научу вас, как создать свой первый пакет NPM и опубликовать его, чтобы сделать его доступным для всех для загрузки и использования.

Пожалуйста, дай мне знать, что ты думаешь!

Спасибо за чтение и удачного кодирования.