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

$3

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

$3

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

const myCustomId = uuid()
`

generateClasses

Description

A utility to pass custom BEM classes to existing PnP components

$3

`
import {generateClasses} from @squiz/xaccel-utility-functions;
...
You can make a div in JSX like this:
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

$3

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

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

generateNewSubBlock

Description

A utility to generate new subblock

$3

`
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

$3

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

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