@miraidesigns/utils

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));