@miraidesigns/utils NPM

Utils

A collection of useful Sass and TypeScript functions.

Sass

px2rem

A basic function to convert a given px value into rem.

@use '@miraidesigns/utils';

p {
    font-size: utils.px2rem(16px); // Results in 1rem
}

TypeScript

Functions

Name	Type	Description
`isRTL()`	`(): boolean`	Returns wether or not the page is currently in RTL mode
`hasScrollbar(elem, horizontal?)`	`(Element, boolean): boolean`	Returns wether or not the current element has a visible scrollbar
`getScrollbarParent(elem, ignoreElem?)`	`(HTMLElement, string): HTMLElement`	Starting from the given element, returns the closest parent that has a scrollbar
`matchParentHeight(elem)`	`(HTMLElement): void`	Match the given element's height to that of its parent.
`throttle(func, delay)`	`((...args: any[]) => void, number): () => void`	Will limit how often a function can be executed
`debounce(func, timeout)`	`((...args: any[]) => void, number): () => void`	Will block a function from being executed again until enough time has passed
`empty(string)`	`(string): boolean`	Strip string of white spaces and check if its empty.
`imageLoaded(image)`	`(HTMLImageElement): Promise<boolean>`	Will resolve promise once an image is fully loaded.

Here is a small example using the throttle function.

// Here we import the throttle function from our utils module.
import { throttle } from '@miraidesigns/utils';

const throttledFunc = () => {
    console.log('I only execute every 250ms');
}

// And we apply the throttle to a scroll event, a very common way to avoid overhead on repeated calls.
window.addEventListener('scroll', throttle(throttledFunc, 250));