## Description
npm install @squiz/xaccel-utility-functionsA package contains the following functions:
- debounce
- uuid
- generateClasses
- generateModifierClass
- generateNewSubBlock
- generateCSSTransitionClasses
This function will debounce the callback. It provides better performance
``
import {debounce} from @squiz/xaccel-utility-functions;
window.addEventListener('resize', debounce(functionToDebounce));
`
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
`
import {uuid} from @squiz/xaccel-utility-functions;
const myCustomId = uuid()
`
A utility to pass custom BEM classes to existing PnP components
``
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
...
A utility to create transition classes, which can be used in CSSTransition component
`
import {generateCSSTransitionClasses} from @squiz/xaccel-utility-functions;
{
block: 'collapsible-body',
override: className,
},
styles
)}
>
`
A utility to generate new subblock
`
import {overflowMenuButtonClass} from @squiz/xaccel-utility-functions;
const overflowMenuButtonClass = generateNewSubBlock(
{
block: 'overflow-menu',
sub: '-button',
override: className,
},
styles
)
`
A utility to generate new modifier class
`
import {overflowMenuButtonClass} from @squiz/xaccel-utility-functions;
const rightToLeftClass = generateModifierClass(
{
block: 'dropdown',
element: 'menu',
modifier: 'right-to-left',
override: className,
},
styles
)
``