4.0.2 • Published 2 months ago

@snack-uikit/utils

Licence

Apache-2.0

Version

4.0.2

Deps

Size

113 kB

Vulns

Weekly

Stars

Summary Dependency Versions

Utils

Installation

npm i @snack-uikit/utils

Changelog

Description

Пакет @snack-uikit/utils предоставляет набор утилит для разработки React-компонентов: React-хуки для работы с состоянием, событиями, темами и другими задачами, а также вспомогательные функции для обработки пропов компонентов и определения окружения выполнения.
Хуки поддерживают различные сценарии использования: управление темами (useThemeConfig, ThemeProvider), работа с контролируемым и неконтролируемым состоянием (useValueControl), обработка событий с дебаунсом (useDebounce), управление динамическими списками (useDynamicList), обработка свайпов (useSwipeable), управление состоянием модальных окон (useModalOpenState), сохранение данных (useDataPersist), а также SSR-совместимые хуки (useIsomorphicLayoutEffect, isBrowser).
Вспомогательные функции помогают работать с пропами компонентов: исключать или извлекать вспомогательные свойства (excludeSupportProps, extractSupportProps, extractDataTestProps) для корректной передачи пропов в DOM-элементы.
Хуки оптимизированы для работы в SSR-окружении и поддерживают современные браузерные API (например, CloseWatcher для модальных окон).

Example

import { useThemeConfig } from '@snack-uikit/utils';

enum Theme {
  Light = 'Light',
  Dark = 'Dark',
}

const themeMap = {
  [Theme.Light]: 'light-theme-class',
  [Theme.Dark]: 'dark-theme-class',
};

function Example() {
  const theme = useThemeConfig({ 
    themeMap, 
    defaultTheme: Theme.Light 
  });

  return (
    <div className={theme.themeClassName}>
      <button onClick={() => theme.changeTheme(Theme.Dark)}>
        Переключить на тёмную тему
      </button>
      <button onClick={() => theme.changeTheme(Theme.Light)}>
        Переключить на светлую тему
      </button>
    </div>
  );
}

useDebounce

React hook

Хук задерживает выполнение функции или обновление значения до тех пор, пока не пройдет определенный период времени без новых вызовов.

useDynamicList

React hook

Хук позволяет распределять элементы списка на две группы: видимые и невидимые, в зависимости от ширины контейнера

useEventHandler

React hook

Хук для создания обработчика событий с неизменной функцией.

useLayoutEffect

React hook

Хук используется вместо стандартного useLayoutEffect-а, нужен для корректной работы SSR

useSwipeable

Хук для работы с событиями свайпа

Props

name	type	default value	description
enabled	`boolean`	true	Включен ли свайп
availableDirections	`SwipeDirections[]`	-	Направления, в которых будет работать свайп. Укажите это свойство, чтобы предотвратить конфликты и заблокировать свайп в родительских элементах по этим направлениям.
onSwipedDown	`SwipeCallback`	-	Called after a DOWN swipe
onSwipedLeft	`SwipeCallback`	-	Called after a LEFT swipe
onSwipedRight	`SwipeCallback`	-	Called after a RIGHT swipe
onSwipedUp	`SwipeCallback`	-	Called after a UP swipe
onSwipeStart	`SwipeCallback`	-	Called at start of a tracked swipe.
onSwiped	`SwipeCallback`	-	Called after any swipe.
onSwiping	`SwipeCallback`	-	Called for each move event during a tracked swipe.
onTap	`TapCallback`	-	Called after a tap. A touch under the min distance, `delta`.
onTouchStartOrOnMouseDown	`TapCallback`	-	Called for `touchstart` and `mousedown`.
onTouchEndOrOnMouseUp	`TapCallback`	-	Called for `touchend` and `mouseup`.
delta	`ConfigurationOptionDelta`	-	Min distance(px) before a swipe starts. Default: `10`
preventScrollOnSwipe	`boolean`	-	Prevents scroll during swipe in most cases. Default: `false`
rotationAngle	`number`	-	Set a rotation angle. Default: `0`
trackMouse	`boolean`	-	Track mouse input. Default: `false`
trackTouch	`boolean`	-	Track touch input. Default: `true`
swipeDuration	`number`	-	Allowable duration of a swipe (ms). Default: `Infinity`
touchEventOptions	`{ passive: boolean; }`	-	Options for touch event listeners

useThemeConfig

Хук для работы с темами

Props

name	type	default value	description
themeMap*	`Record<T, string>`	-	Объект с указанием соответсвия темы и css-класса

useValueControl

Хук для работы с состоянием. Нужен для поддержки controlled/uncontrolled поведения, в зависимости от того были ли переданы входные аргументы

Props

name	type	default value	description
value	`TValue`	-	Значение состояния
defaultValue	`TValue`	-	Значение по умолчанию
onChange	`(value: TValue) => void`	-	Колбек, вызываемый на смену состояния

useDataPersist

Props

name	type	default value
options	`DataPersistOptions<TData>`	-
parser	`(jsonData: string) => TData`	-
serializer	`(data: TData) => string`	-

name	type	default value	description
defaultTheme*	`string`	-	Значение темы по умолчанию
themeMap*	`Record<string, string>`	-	Объект с указанием соответсвия темы и css-класса
children*	`ReactNode`	-	Дети, которые будут обёрнуты в провайдер