📦 Установка

yarn add @alfalab/hooks

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

import { usePrevious } from '@alfalab/hooks';

Состав

useClickOutside

Подписка на событие mousedown, touchstart. При нажатии вне элемента вызывает переданный callback

useCountdown

Хук обратного отсчёта времени. Возвращает оставшееся количество секунд до определённой даты.

useDidUpdateEffect

Вызывает коллбэк при изменении значений, переданных в зависимостях. В отличии от useEffect — пропускает начальный рендер (аналог ComponentDidUpdate).

useDimensions

Хук для измерения DOM-элемента, в том числе в live-режиме

useEventCallback

https://github.com/facebook/react/issues/14099#issuecomment-440013892

useFocus

Подписка на событие focusin, focusout для конкретного события фокуса (клавиатура/мышка). Возвращает true/false о состоянии фокуса на элементе или на одном из его дочерних элементов

useImageLoadingState

Возвращает результат загрузки изображения — loading | loaded | error

useKeydownOutside

Подписка на событие keydown. При нажатии вне элемента вызывает переданный callback

useMedia

Возвращает значение, которое соответствует сработавшему медиа-выражению

const [columns] = useMedia([
    [1, '(min-width: 400px)'],
    [2, '(min-width: 600px)'],
    [3, '(min-width: 900px)'],
], 1);

usePrevious

Возвращает предыдущее состояние из useState

function Counter() {
    const [count, setCount] = useState(0);
    const prevCount = usePrevious(count);
    return (
        <h1>
            Сейчас: {count}, до этого: {prevCount}
        </h1>
    );
}

useForceUpdate

Возвращает коллбек для принудительного ререндера компонента

useIsMounted

Возвращает статус доступности компонента

useId

Возвращает уникальный идентификатор

useLayoutEffect_SAFE_FOR_SSR

Хук для layout-эффекта с фоллбэком к обычному эффекту для сред, где layout-эффекты не должны использоваться (например, рендеринг на стороне сервера).