Как создать пользовательский реактивный крюк и опубликовать его на NPM

Автор оригинала: Colby Fayock.

Крючки – это удобное дополнение к API RACT API, который позволяет нам организовать часть нашей логики и состояния в функциональных компонентах. Как мы можем построить пользовательский крючок и поделиться этим с остальным миром?

Что такое крючки?
Почему пользовательские крючки крутые?
Что мы собираемся сделать?
Шаг 0: Называть ваш крючок
Шаг 1: Настройка вашего проекта
Шаг 2: Написание нового реактивный крюк
Шаг 3: Используя свой реактивный крюк в примере
Шаг 4: Компиляция вашего реактивный крюк и пример
Шаг 5: Публикация вашего React Clok To NPM
Больше ресурсов о крючках

Что такое крючки?

Реагировать крючки По простым условиям являются функции. Когда вы включите их в свой компонент или в течение другого крючка, они позволяют использовать Inta React Interals и частей жизненного цикла RACTECYCLE с родными крючками, такими как Уместите и Useffect Отказ

Я не планирую делать глубокое погружение о крючках, но вы можете Проверьте быструю введение С примером Уместите а также Введение от команды Ract React Отказ

Почему пользовательские крючки крутые?

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

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

Что мы собираемся сделать?

Для целей этой статьи мы собираемся сохранить его простым с базовым крюком. Как правило, вы можете использовать крючок, потому что, а не типичная функция, вы используете другие родные крючки, которые необходимы для использования в компонентах функции RACT. Мы собираемся придерживаться некоторых основных входов и вывода, чтобы сохранить все возможное.

Мы собираемся воссоздать этот обычай Крючок PlaceCage Я сделал, что позволяет легко генерировать URL-адреса изображений, которые вы можете использовать в качестве изображений заполнителей.

Если вы не знакомы, PlaceCage Является ли API, который позволяет создавать изображения NAC CAGE в качестве изображений заполнителя для вашего сайта. Глупый? да. Веселье? Абсолютно!

Но если вы не поклонник работы NIC, вы можете просто легко поменять в URL для Заполнить Мюррей который использует фотографии Билла Мюррея или PlaceHolder.com Что генерирует простой твердый цветной фона с текстом, который показывает размер изображения.

Шаг 0: Называть ваш крючок

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

В нашем случае наше имя крюка будет UsePlaceCage . Сейчас с этим в виду у нас есть 2 формата нашего имени – один в формате CameLase и один в формате змейки.

камера: UsePlaceCage
змеиный чехол: Использование-ledeCage

Формат CAMELCASE будет использоваться для фактической функции крючков, где имя со знаком змеи будет использоваться для имени пакета и некоторых папок. При создании имени имейте в виду, что имя пакета должно быть уникальным. Если пакет с тем же именем существует на npmjs.com Уже вы не сможете его использовать.

Если у вас еще нет имени, все в порядке! Вы можете просто использовать свое имя или то, о чем вы можете думать, оно не имеет значения, так как на самом деле мы просто пытаемся узнать, как это сделать. Если бы это был я, например, я бы использовал:

камера: UseColbyscoolhook
змеиный чехол: Использование-Colbyscoolhook.

Но просто уточнить, для остального нашего примера мы собираемся придерживаться UsePlaceCage и Использование-ledeCage Отказ

Шаг 1: Настройка вашего проекта

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

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

Требования здесь – портить и пряжа Поскольку он помогает предоставить инструменты, которые позволяют легко лечить этот шаблон, например, использование функции рабочих областей для простых сценариев NPM для управления кодом из корня проекта. Если любой из них – это отделка, вы можете попробовать загрузку репо с помощью ссылки на загрузку и обновить ее по мере необходимости.

Клонирование шаблона крюка из Git

Начать, давайте клонировать репозиторий из GitHub. В приведенной ниже команде вы должны заменить Использовать - My-Custom-Took с именем вашего крючка, например Использование-куки или Использование-луна Отказ

git clone https://github.com/colbyfayock/use-custom-hook use-my-custom-hook
cd use-my-custom-hook

Как только вы клонируете и перейдите к этой папке, теперь вы должны увидеть 2 каталога – An Пример каталог и A Использовать-пользовательский крючок каталог.

Это даст вам несколько вещей, чтобы начать:

Каталог крючков, который будет включать источник для нашего крючка
Создание сценариев, которые компилируют наш крюк с варить
Пример страницы, которая импортирует наш крючок и создает простую демонстрационную страницу с next.js.

Запуск сценариев настроек крюка

После того, как мы успешно клонируем репо REPO, мы хотим запустить скрипты установки, которые устанавливают зависимости и обновляют крюк к имени, которое мы хотим.

yarn install && yarn setup

Когда скрипт настройки работает, это сделает несколько вещей:

Он спросит вас о своем имени – это используется для обновления лицензии и имени автора пакета
Он попросит вас имя вашего крючка в 2 вариантах – CameLCase и Snake-Case – это будет использоваться для обновления имени крючка в течение шаблона и перемещать файлы с именем на правильное местоположение
Он будет сброшен Git – он сначала удалит локальную папку .git, которая содержит историю из моего шаблона и повторно повторно повторно погрузила git со свежим фиксацией, чтобы начать свою новую историю в
Наконец, он удалит каталог сценариев настройки и удалить зависимости пакетов, которые были использованы только этими сценариями

Запуск сервера разработки

Как только скрипты установки заканчиваются, вы захотите запустить:

yarn develop

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

С этим все готово, мы можем начать!

Следуйте вместе с Commit!

Шаг 2: Написание нового реактивный крюк

На данный момент вы должны иметь новый пользовательский крючок, где вы можете сделать, что вы хотели бы. Но так как мы собираемся пройтись по восстановлению UsePlaceCage Крюк, давайте начнем там.

Крюк UsePlaceCage делает 1 простую вещь с высокого уровня высокого уровня – он принимает объект конфигурации и возвращает ряд URL-адресов изображений, которые вы можете использовать для вашего приложения.

Так же как напоминание, в любое время, когда я упоминаю UsePlaceCage или Использование-ledeCage , вы должны использовать имя крючка, которое вы настраиваете ранее.

Немного о Placecage.com

PLACECAGE.COM – это сервис изображений для заполнения, который делает 1 вещь. Требуется URL-адрес с простой конфигурацией и возвращает изображение … NAC CAGE.

Из простейшего использования сервис использует шаблон URL следующим образом:

https://www.placecage.com/200/300

Это будет вернуть изображение с шириной 200 и высотой 300.

Необязательно, вы можете пройти дополнительный URL-параметр, который определяет тип изображения:

https://www.placecage.com/gif/200/300

В этом конкретном случае наш тип дар Итак, мы получим GIF.

Различные типы, доступные для использования:

Ничего: успокоение
G : серый
C .: сумасшедший
Гиф : дар

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

Определение нашей основной генераторной функции

Чтобы начать, мы собираемся скопировать над функцией внизу наших Use-PlaceCage/SRC/UsePlaceCage.js Файл, который позволяет нам генерировать URL-адрес изображения, а также несколько постоянных определений, которые мы будем использовать в этой функции.

Во-первых, давайте скопируем наши константы на вершину нашего useplacecage.js файл:

const PLACECAGE_HOST = 'https://www.placecage.com/';
const TYPES = {
  calm: null,
  gray: 'g',
  crazy: 'c',
  gif: 'gif'
};
const DEFAULT_TYPE = 'calm';
const ERROR_BASE = 'Failed to place Nick';

Мы тут:

Определите хост, который является базовым URL нашей службы изображения.
Определите доступные типы, которые мы будем использовать в API конфигурации. Мы устанавливаем Спокойствие к null потому что это значение по умолчанию, которое вы получаете, не включая его вообще
Наш тип по умолчанию будет спокойствие
И мы устанавливаем базу ошибок, которое является последовательным сообщением при броске ошибки

Тогда для нашей функции давайте скопируем это внизу наших useplacecage.js файл:

function generateCage(settings) {
  const { type = DEFAULT_TYPE, width = 200, height = 200, count = 1 } = settings;
  const config = [];
    
  if ( type !== DEFAULT_TYPE && TYPES[type] ) {
    config.push(TYPES[type]);
  }
    
  config.push(width, height);
    
  if ( isNaN(count) ) {
    throw new Error(`${ERROR_BASE}: Invalid count ${count}`);
  }
    
  return [...new Array(count)].map(() => `${PLACECAGE_HOST}${config.join('/')}`);
}

Прогулка по этому коду:

Мы определяем RensateCage Функция, которую мы будем использовать для генерации нашего URL-адреса изображений
Мы принимаем объект настроек в качестве аргумента, который определяет конфигурацию нашего URL-адреса изображений. Мы будем использовать те же параметры, что и в нашем URL-адресе Placecage.com
Мы разрушаем эти настройки, чтобы сделать их доступными для нас для использования
У нас есть несколько дефолтов здесь, чтобы облегчить. Наш по умолчанию Тип будет определен Default_type Наряду с шириной по умолчанию, высоту и количество результатов, которые мы хотим вернуться
Мы создаем config . множество. Мы будем использовать это, чтобы добавить все различные объекты конфигурации в нашем URL и, наконец, присоединяйтесь к ним вместе с / по сути, делая URL
Прежде чем мы наш наш конфиг на этот массив мы проверяем, используя ли это действительный аргумент, используя Типы объект, чтобы проверить против него. Если это действительно, мы нажимаем его на наш массив конфигурации
Затем мы толкаем нашу ширину и высоту
Мы выполняем некоторую проверку типа, если у нас нет действительного номера, как считать мы бросаем ошибку, в противном случае мы получим неверные результаты
Наконец, мы возвращаем новый массив с количеством запрошенных результатов, сопоставлено на URL-создатель, который использует Placecage_host В качестве нашего определенного базового URL-адреса и с нашим массивом конфигурации соединены /

И если бы мы проверили эту функцию, это будет выглядеть так:

const cage = generateCage({
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
});

console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

Используя нашу функцию в крючке

Так что теперь, когда у нас есть наша функция генератора, давайте на самом деле использовать его в нашем крючке!

Внутри UsePlaceCage Функция в Use-PlaceCage/SRC/UsePlaceCage.js Файл, мы можем добавить:

export default function usePlaceCage (settings = {}) {
  return generateCage(settings);
}

Что это делает это использует нашу функцию генератора, принимает в настройках, которые были переданы в крючок, и возвращает это значение из крючка.

Подобно нашему предыдущему примеру использования, если бы мы использовали наш крючок, он выглядел бы так:

const cage = usePlaceCage({
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
});

console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

На данный момент он делает то же самое!

Так что теперь у нас есть наш крючок, он служит функцией для создания URL-адресов изображений для сервиса Placecage.com. Как мы можем использовать это?

Следуйте вместе с Commit!

Шаг 3: Используя свой реактивный крюк в примере

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

Настройка крюка

Чтобы начать, давайте откроем наш Пример/Страницы/index.js файл. Внутри этого файла вы увидите следующее:

const hookSettings = {
  message: 'Hello, custom hook!'
}

const { message } = usePlaceCage(hookSettings);

Этот фрагмент – это то, что использовалось по умолчанию в шаблоне только для доказательства концепции, поэтому давайте обновим это. Мы собираемся использовать ту же точную конфигурацию, что и на шаге 2:

const hookSettings = {
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
}

const cage = usePlaceCage(hookSettings);

Опять же, мы создали объект наших настроек с конфигурацией для нашего крюка и вызовите наш крючок и установите значение для Кейдж постоянный.

Если мы теперь консолью журналом, которое ценило наши наши инструменты DEV, мы видим его работать!

console.log('cage', cage);

Примечание: если вы получите ошибку здесь о сообщение Вы можете прокомментировать, что наши или удалите его в разделе «Примеры».

Обновление примера с нашей новой конфигурацией крюка

Если вы прокрутите вниз к разделу примеров, вы заметите, что у нас есть одинаковые по умолчанию Крючки Как указано выше, так что давайте снова обновим, чтобы убедиться, что наш пример точен.

{`const hookSettings = {
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
}

const cage = usePlaceCage(hookSettings);`}

Вы также заметите, что мы больше не используем сообщение Переменная. Если вы не удалили его на последнем шаге, теперь мы можем заменить его под вывод заголовки:


  { JSON.stringify(cage) }


  { cage.map((img, i) => )}

Мы делаем здесь 2 вещи:

Вместо того, чтобы показать саму переменной, мы обертываем его с помощью Json.stringify так что мы можем показать содержимое массива
Мы также используем карта Функция для цикла на наше URL-адреса изображений в Кейдж Константа и создайте новый элемент изображения для каждого. Это давайте превью на вывод вместо того, чтобы просто видеть значения

И как только вы сохраните и откроете свой браузер, теперь вы должны увидеть ваши обновленные примеры и вывод!

Другие вещи, которые вы можете сделать на этой странице

Прежде чем двигаться дальше, вы также можете обновить несколько других вещей, которые будут важны для ваших крючков:

Обновите Как использовать раздел с инструкциями
Добавьте дополнительные примеры, чтобы люди могли знать, что делать

Несколько вещей также автоматически вытащены из use-placecage/package.json файл. Вы можете либо обновить их там, чтобы облегчить его поддерживать, или вы можете заменить их в примере страницы:

Имя : Используется в страницы
Описание : Используется в описании под
Repository.url : Используется для включения ссылки на репозиторий
Автор : Имя и URL используются для включения ссылки в нижней части страницы

Следуйте вместе с Commit!

Шаг 4: Компиляция вашего реактивный крюк и пример

То, как мы можем сделать наш крючок легко работать, когда модуль NPM – составить его для других для использования. Мы используем Babel, чтобы сделать это.

Хотя процесс публикации уже делает это для нас автоматически с Prepubublishonly Сценарий в use-placecage/package.json Мы можем вручную компилировать наш крюк, используя пряжа строит Команда из корня проекта.

Наряду с компиляцией крюка, работает пряжа строит Также будет скомпилировать страницу пример, что позволяет вам загружать его, где бы вы ни хотели. После запуска этой команды вы должны увидеть вывод статических HTML-файлов в Пример/выход каталог.

Если вы ищете рекомендацию, NetLify облегчает подключение вашего Github Учет и разверните статический сайт.

Смотрите демонстрационный сайт, развернутый в NetLify!

Шаг 5: Публикация вашего React Clok To NPM

Наконец, если вы довольны своим крючком, пришло время публиковать!

NPM делает эту часть действительно легкой. Единственная предпосылка, которую вам нужно иметь учетную запись NPM. С помощью этой учетной записи давайте войти в систему:

npm login

Что подскажет вам учетные данные для входа в систему.

Далее давайте навигации по каталогу нашего крюка, так как наша конфигурация пакета находится под use-placecage/package.json :

cd use-placecage

Тогда мы можем просто опубликовать!

npm publish

Имейте в виду, что каждое имя пакета должно быть уникальным. Если вы использовали Использование-ledeCage , это уже взято … Меня. ?

Но если вы успешно, NPM должен создать свой крючок и загрузить его в реестр пакета!

Затем он будет доступен на NPM со следующим рисунком:

https://www.npmjs.com/package/[package-name]

Так для использование-плакас Это доступно здесь: https://www.npmjs.com/package/use-placeCage

Теперь у нас есть пользовательский крючок!

Ура ? Если вы последовали, вы должны теперь создали пользовательский крюк и опубликовал его в NPM.

Хотя это был глупый пример, используя Placecage.com, это дает нам хорошее представление о том, как мы можем легко установить это.

Вы также заметите, что этот конкретный пример не был лучшим случаем использования крючков, где мы могли бы просто использовать функцию. Как правило, мы захочем использовать пользовательские крючки для обертывания функциональности, которые могут жить только внутри компонента реагирования, например Уместите Отказ Чтобы узнать больше об этом, вы можете прочитать один из моих других Статьи о пользовательских крючках Отказ

Однако это дало нам хорошую основу, чтобы поговорить с помощью создания и конфигурации нашего нового крючка!

Больше ресурсов о крючках

Как разрушать основы реактивных крюков (FreeCodeCamp.org)
Представляющий крючки (Rectjs.org)
Крючки API Ссылка (Rectjs.org)

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-custom-react-hook-and-publish-it-to-npm/”

Что такое крючки?

Почему пользовательские крючки крутые?

Что мы собираемся сделать?

Шаг 0: Называть ваш крючок

Шаг 1: Настройка вашего проекта

Клонирование шаблона крюка из Git

Запуск сценариев настроек крюка

Запуск сервера разработки

Шаг 2: Написание нового реактивный крюк

Немного о Placecage.com

Определение нашей основной генераторной функции

Используя нашу функцию в крючке

Шаг 3: Используя свой реактивный крюк в примере

Настройка крюка

Обновление примера с нашей новой конфигурацией крюка

Другие вещи, которые вы можете сделать на этой странице

Шаг 4: Компиляция вашего реактивный крюк и пример

Шаг 5: Публикация вашего React Clok To NPM

Теперь у нас есть пользовательский крючок!

Больше ресурсов о крючках

Читайте ещё по теме: