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