# @snack-uikit/utils

> Пакет с вспомогательными функциями

Latest version **5.0.0** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/utils
pnpm add @snack-uikit/utils
yarn add @snack-uikit/utils
bun add @snack-uikit/utils
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 114.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Anna Kozlova |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/utils
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/utils
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/utils

## Dependencies (2)

- [uncontrollable](https://npm.io/package/uncontrollable.md) ^8.0.4
- [react-swipeable](https://npm.io/package/react-swipeable.md) ^7.0.2

## Recent versions

- 5.0.0 (latest) — 2026-09-21
- 4.0.3-preview-acb79d0b.0 (preview) — 2026-09-21
- 4.0.3-preview-b2e4ed46.0 — 2026-09-21
- 4.0.3-preview-27969f64.0 — 2026-09-21
- 4.0.3-preview-fe85442f.0 — 2026-09-18
- 4.0.3-preview-fc6b5b87.0 — 2026-08-20
- 4.0.2 — 2026-05-18
- 4.0.1 — 2026-01-19
- 4.0.0 — 2025-09-01
- 3.10.2-preview-2ce82c96.0 — 2025-09-01
- 3.10.2-preview-dbf3f886.0 — 2025-08-27
- 3.10.2-preview-af47d898.0 — 2025-08-27
- 3.10.2-preview-05f26bf6.0 — 2025-08-27
- 3.10.2-preview-23549ae9.0 — 2025-08-25
- 3.10.1 — 2025-07-16
- … 55 more at https://npm.io/package/@snack-uikit/utils/versions

## README

# Utils

## Installation

`npm i @snack-uikit/utils`

[Changelog](./CHANGELOG.md)

## 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

```tsx
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>
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## 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 | description |
|------|------|---------------|-------------|
| options | `DataPersistOptions<TData>` | - |  |
| parser | `(jsonData: string) => TData` | - |  |
| serializer | `(data: TData) => string` | - |  |
## useModalOpenState
`hook` 

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

Функция для исключения вспомогательных свойств (data-test-id & aria-*)
## extractDataTestProps
`helper` 

Функция для отбора свойства data-test-id
## extractSupportProps
`helper` 

Функция для отбора вспомогательных свойств (data-test-id & aria-*)
## isBrowser
`helper` 

Функция проверки текущей среды выполнения кода,
нужна для корректной работы SSR


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._