@prleasing/use

Кастомные Vue 3 хуки

Установка

Добавьте пакет в свои dependencies, используя npm или yarn

npm i @prleasing/use
# или
yarn add @prleasing/use

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

<template>
	<button @click="decrement">-</button>
	{{ current }}
	<button @click="increment">+</button>
</template>
<script lang="ts">
import { useCounter } from '@prleasing/use';
import { defineComponent} from 'vue';
export default defineComponent({
    setup() {
	    const {current, increment, decrement} = useCounter({
		    min: 0,
		    max: 20
	    });

	    return {current, increment, decrement};
    }
);
</script>

Список функций

Состояние

Функция	Описание
useState	Создает стейт
useToggle	Создает переключатель статуса
useModel	Обертка над v-model}

События

Функция	Описание
useEventListener	Вешает обработчик события
useWindowResize	Вешает обработчик на изменение окна браузера

Слежка

Функция	Описание
useIntersectionObserver	Слежка за появлением элемента в области видимости документа
useMutationObserver	Слежка за изменением DOM-элементов
useResizeObserver	Слежка за изменением размера элемента или его потомков

Работа с датой

Функция	Описание
useNow	Получение нового инстанса DateTime
useCurrentTime	Получение текущей даты и времени
useToday	Получение текущего дня
useCalendar	Создает календарь
useCountdown	Создает таймер обратного отсчета
useDateFormat	Форматирует дату DateTime в заданный формат

Анимации

Функция	Описание
useRequestAnimationFrame	Обработчик RequestAnimationFrame
useTweenNumber	Плавное изменение числа

Утилиты

Функция	Описание
useEndlessLading	Постепенная загрузка элементов

Утилиты

Функция	Описание
useVisible	Видимость элемента
useCounter	Счетчик
useGeolocation	Определение геолокации
useInterval	Вызов функции с заданным интервалом
useBodyOverflow	Блокировка скола страницы

Localstorage

Функция	Описание
useLocalStorage	Работа с LocalStorage
useLocalStorageReactive	Реактивная работа с LocalStorage

Mount

Функция	Описание
useRef	Связывает DOM элемент/ы с реактивным объектом