# @squiz/xaccel-utility-functions

> ## Description

Latest version **1.15.1** (published 2024-06-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @squiz/xaccel-utility-functions
pnpm add @squiz/xaccel-utility-functions
yarn add @squiz/xaccel-utility-functions
bun add @squiz/xaccel-utility-functions
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.15.1 |
| Published | 2024-06-26 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 98.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |

## Links

- npm: https://www.npmjs.com/package/@squiz/xaccel-utility-functions
- npm.io page: https://npm.io/package/@squiz/xaccel-utility-functions

## Recent versions

- 1.15.1 (latest) — 2024-06-26
- 1.15.1-beta.4 — 2024-06-20
- 1.15.1-beta.0 — 2024-05-10
- 1.15.0 — 2024-05-10
- 1.14.0-alpha.1 — 2024-04-18
- 1.15.0-beta.0 — 2024-03-21
- 1.13.1 — 2024-01-30
- 1.13.0-beta.1 — 2024-01-23
- 1.12.1 — 2024-01-23
- 1.12.1-alpha.0 — 2024-01-19
- 1.9.1-alpha.0 — 2024-01-19
- 1.9.1-beta.0 — 2024-01-19
- 1.9.0 — 2024-01-19
- 1.9.0-beta.32 — 2024-01-11
- 1.11.0-alpha.8 — 2023-12-18
- … 36 more at https://npm.io/package/@squiz/xaccel-utility-functions/versions

## README

# utility-functions

## Description

A package contains the following functions:

-   debounce
-   uuid
-   generateClasses
-   generateModifierClass
-   generateNewSubBlock
-   generateCSSTransitionClasses

# debounce

## Description

This function will debounce the callback. It provides better performance

### Usage

```
import {debounce} from @squiz/xaccel-utility-functions;

window.addEventListener('resize', debounce(functionToDebounce));
```

# uuid

## Description

A utility for crating unique string id.

IMPORTANT! This is deprecated version of uuid function. It can be used only on the client-side. The function will be removed from this package soon. It's still here because it's used in some PnP components
You can find new uuid in "@squiz/xaccel-uuid package

### Usage

```
import {uuid} from @squiz/xaccel-utility-functions;

const myCustomId = uuid()
```

# generateClasses

## Description

A utility to pass custom BEM classes to existing PnP components

### Usage

```
import {generateClasses} from @squiz/xaccel-utility-functions;
...
You can make a div in JSX like this:
<div
    className={generateClasses(
        {
            block: 'collapsible-header',
            modifiers: { active: expanded },
            override: userCustomClassObject,
        },
        styles
    )}
>
And pass external styles to userCustomClassObject
e.g. className={{
                className: 'quickLinksHeader',
                cssModule: styles,
                retainMissingModuleClasses: true,
            }}
Now every element with e.g. collapsible-header__title will also have quickLinksHeader__title class applied
...
```

# generateCSSTransitionClasses

## Description

A utility to create transition classes, which can be used in CSSTransition component

### Usage

```
import {generateCSSTransitionClasses} from @squiz/xaccel-utility-functions;

<CSSTransition
    classNames={generateCSSTransitionClasses(
        {
            block: 'collapsible-body',
            override: className,
        },
        styles
    )}
>
```

# generateNewSubBlock

## Description

A utility to generate new subblock

### Usage

```
import {overflowMenuButtonClass} from @squiz/xaccel-utility-functions;

const overflowMenuButtonClass = generateNewSubBlock(
    {
        block: 'overflow-menu',
        sub: '-button',
        override: className,
    },
    styles
)
```

## generateModifierClass

## Description

A utility to generate new modifier class

### Usage

```
import {overflowMenuButtonClass} from @squiz/xaccel-utility-functions;

const rightToLeftClass = generateModifierClass(
    {
        block: 'dropdown',
        element: 'menu',
        modifier: 'right-to-left',
        override: className,
    },
    styles
)
```

---
_Source: https://npm.io/package/@squiz/xaccel-utility-functions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._