Socket
Socket
Sign inDemoInstall

@alfalab/hooks

Package Overview
Dependencies
3
Maintainers
15
Versions
48
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@alfalab/hooks


Version published
Weekly downloads
610
decreased by-40.37%
Maintainers
15
Install size
1.65 MB
Created
Weekly downloads
 

Readme

Source

@alfalab/hooks

Набор частоиспользуемых React-хуков

📦 Установка

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-эффекты не должны использоваться (например, рендеринг на стороне сервера).

FAQs

Last updated on 18 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc