Введение

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

Не нужно изобретать велосипед!

Такой реакцией на этот подход смотрят создатели и пользователи библиотек повторно используемых функций для различных фреймворков (React, vue и т.д.).

Для Vue — это, например, vueuse. (служебные функции vue)

Для React лучшим на сегодняшний день является совершенно новый и активно поддерживаемый Reactuse (для хуков реагирования)

Какую проблему решают эти библиотеки?

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

1. использовать веб-сокеты
2. сделать запросы
3. определить геолокацию пользователя
4. использовать локальное хранилище
5. легко создавать модальные окна

И это лишь малая часть всех возможных случаев.

Почему VueUse — это круто?

VueUse — одна из самых популярных библиотек для vue. В конце концов, он обеспечивает самую базовую функциональность многократного использования. Некоторые думают, что это стандарт при создании приложений Vue, и без него сделать это невозможно. Трудно не согласиться, библиотека состоит из более чем двухсот функций и следует описанной выше идеологии.

Лучшая альтернатива React

Хваля vueuse как лучший способ идеально реализовать отличную идею, мы не должны забывать о одной из лучших библиотек/фреймворков js — React. И здесь ситуация была более неприятной. Ведь не существует устоявшейся, надежной, обширной и единственной библиотеки для React. Были попытки от разных разработчиков, но в одном из них слишком мало хуков (в React они хуки, да), где-то есть хуки, построенные с использованием необработанного API.

Чтобы улучшить ситуацию, и в качестве альтернативы vueuse, но в режиме реакции, появился Reactuse.

Давайте, например, попробуем создать управление списками с помощью библиотеки и используя только vanilla React.

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

Мы получаем значение (значение массива), set (функция для присвоения другого значения массива), push (функция для добавления значений в массив), RemoveAt (удаление по индексу), updateAt (изменение значения по индексу), Clear (очистка массив), сброс (сброс к значению по умолчанию)
Теперь код для получения всех этих состояний и функций в Vanilla реагирует:

const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index   1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

И мы получаем точно такие же методы и состояние. И код намного меньше и проще

Библиотека активно поддерживается, добавляются новые хуки, есть удобный сайт с документацией, хуки используют простые исходники и имеют более продуманный API. Сейчас реализовано более 80 хуков. Также хочу отметить, что есть абсолютно новые реализации, которых я больше нигде не видел:

• usePaint — для создания холста для рисования на нем. Вы задаете холст, а хук позволяет рисовать на нем, регулируете размер кисти, цвет, непрозрачность и статус «рисовать» или «сейчас рисуем»
• useStopwatch — для создания секундомеров
• useEyeDropper — использовать пипетку для выбора цвета
• огромное количество перехватчиков для работы с API пользовательского устройства или браузера (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash и т. д.)

Заключение

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

реагировать на ссылки

npm — github