Де взяти типові хуки для проєкту на React чи Vue?

Кожного разу ми пишемо купу однакових хуків з проєкту в проєкт. Всім знайомі debounce, dark mode, clipboard, window size тощо. Так зʼявилися бібліотеки, які налічують неймовірну кількість хуків, які можуть бути корисні в будь-якому проєкті. Тому давайте розглянемо деякі з них для бібліотеки React та фреймворку Vue.

React Use

Найбільша та найпопулярніша бібліотека для React, яка налічує близько 110 хуків. Серед них є як усі базові, наприклад, useDebounce, useLocalStorage, useWindowSize, так і унікальні, як-от useFullscreen чи useGetSet.

Встановлення та використання

Для встановлення використовуємо команду:

npm i react-use

Після цього імпортуємо та використовуємо будь-який хук з бібліотеки:

import { useClickAway } from 'react-use';

function Component() {
  const ref = useRef(null);
  
  useClickAway(ref, () => {
    console.log('Clicked outside');
  });

  return (
    <div
      ref={ref}
      style={{
        width: 200,
        height: 200,
        background: 'red',
      }}
    />
  );
};

Посилання

• Документація, яка створена за допомогою Storybook
• Репозиторій, який налічує більше 40K ⭐️

useHooks

Ще одна бібліотека для React, яка налічує майже 40 різних хуків. Також має всі базові та деякі унікальні хуки. Сама бібліотека зроблена дуже просто, так як написана всього в одному файлі.

Встановлення та використання

Для встановлення використовуємо команду:

npm i @uidotdev/usehooks

Після цього імпортуємо та використовуємо будь-який хук з бібліотеки:

import { useClickAway } from '@uidotdev/usehooks';

function Component() {
  const ref = useClickAway(() => {
    console.log('Clicked outside');
  });

  return (
    <div 
      ref={ref}
      style={{
        width: 200,
        height: 200,
        background: 'red',
      }}
    />
  );
};

Посилання

• Документація, що знаходиться на сайті
• Репозиторій, який налічує більше 8K ⭐️

useHooks.ts

Схожа на попередню, бібліотека для React, яка налічує майже 35 хуків. Але на відміну від попередньої, є більш якісною, як мінімум, за рахунок наявності тестів.

Встановлення та використання

Для встановлення використовуємо команду:

npm i usehooks-ts

Після цього імпортуємо та використовуємо будь-який хук з бібліотеки:

import { useOnClickOutside } from 'usehooks-ts';

function Component() {
  const ref = useRef(null);
  
  useOnClickOutside(ref, () => {
    console.log('Clicked outside');
  });

  return (
    <div
      ref={ref}
      style={{
        width: 200,
        height: 200,
        background: 'red',
      }}
    />
  );
};

Посилання

• Документація, що знаходиться на сайті
• Репозиторій, який налічує більше 5K ⭐️

VueUse

Бібліотека для Vue, яка налічує близько 140 composable функцій. Окрім функцій, також пропонує директиви та компоненти. Налічує як всі базові, так і деякі унікальні composable функції, як-от useDevicePixelRatio або useTextSelection.

Встановлення та використання

Vue

Для встановлення використовуємо команду:

npm i @vueuse/core

Nuxt

Також є можливість встановити модуль для Nuxt:

npm i @vueuse/nuxt

Після цього імпортуємо та використовуємо будь-який хук з бібліотеки:

<script setup> 
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core';

const target = ref(null);

onClickOutside(target, () => {
  console.log('Clicked outside');
});
</script>

<template> 
  <div
   ref="target"
   :style="{
     width: '200px',
     height: '200px',
     background: 'red',
   }"
 />
 </template>

Посилання

• Документація, що знаходиться на сайті
• Репозиторій, який налічує більше 18K ⭐️

Підсумок

Всі ці бібліотеки можуть в рази спростити життя. Головне уважно подивитися, які в них є хуки або composables, і вже наступного разу не треба буде винаходити велосипед 🤓