@squiz/xaccel-utility-functions

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
)