Creuna JS utils
A collection of useful JS utility functions.
Importing
You can choose whether you want to import everyting or individual modules.
import utils from "@creuna/utils";
import rangeMap from "@creuna/utils/range-map";
Functions
anyToKebab(input)
@creuna/utils/any-to-kebab
input
: string- returns: string
anyToKebab("CamelCaseString");
arrayInsert(array, index, item)
@creuna/utils/array-insert
array
: arrayindex
: numberitem
: any- returns: array
Returns a new array that is a deep clone of the one passed in containing the new item at the specified index.
arrayInsert(["a", "b", "c"], 1, "x");
arrayMove(array, oldIndex, newIndex)
@creuna/utils/array-move
array
: arrayoldIndex
: numbernewIndex
: number- returns: array
Returns a new array that is a deep clone of the one passed in with the item at oldIndex
moved to newIndex
.
arrayInsert(["a", "b", "c"], 1, 2);
arrayRemove(array, index)
@creuna/utils/array-remove
array
: arrayindex
: number- returns: array
Returns a new array that is a deep clone of the one passed in with the item at index
removed.
arrayInsert(["a", "b", "c"], 1);
clamp(value, minimum, maximum)
@creuna/utils/clamp
value
: numberminimum
: numbermaximum
: number- returns: number
clamp
can be used to keep a value between a min and max value.
createPipe(...functions)
@creuna/utils/create-pipe
functions
: any number of functions- returns: function
The pipe combines n functions, calling each function with the output of the last one. To actually execute the pipeline, call the returned function with a value. More on this concept here.
pipe(
removeSpaces,
capitalize,
reverseString
)("a b c");
deepClone(thing)
@creuna/utils/deep-clone
thing
: object | array- returns: object | array
Returns a deep clone of an object (any nested objects or arrays will also be cloned). Be aware that this uses JSON.stringify, meaning that any array elements or object values that are undefined
will be stripped
filterObject(object, predicate)
@creuna/utils/filter-object
object
: objectvalue
: (key: string, value: any): boolean- returns: object
Tests predicate
(with key
and value
) for every entry in object
. Returns a new object that contains every entry that passed the test.
const obj = { a: 1, b: 2, c: 3 };
filterObject(obj, (key, value) => key !== "b" && value !== 3);
fromQueryString(queryString[, prefix])
@creuna/utils/from-query-string
queryString
: stringprefix
: string (default '?'
)- returns: object
Converts a query string into an object.
fromQueryString("?param=test&other=test");
fromQueryString("#param=test&other=test", "#");
getData(dataAttributeName)
@creuna/utils/get-data
dataAttributeName
: string- returns: string
Returns the value of the first DOM node with dataAttributeName
<body>
<div data-some-attribute="true"></div>
</body>
getData("some-attribute");
isEqual(a, b)
@creuna/utils/is-equal
a
: anyb
: any- returns: boolean
Checks whether a
and b
are equal (deep comparison for objects and arrays). This uses JSON.stringify
, so be aware that array elements or object values that are undefined
will be stripped.
isFullyInViewport(node)
@creuna/utils/is-fully-in-viewport
node
: DOM node- returns: boolean
Checks whether the given element is fully visible in the viewport. This is a special case of isInViewport
where the offsets are the dimensions of the element.
isInViewport(node, offset[, offsetX])
@creuna/utils/is-in-viewport
node
: DOM nodeoffset
: numberoffsetX
: number (defaults to offset
)- returns: boolean
Checks whether the given element is visible in the viewport. Positive numbers for offset
mean more of the element needs to be in the viewport while negative numbers mean that the element can be outside of the viewport.
isRunningOnClient: bool
@creuna/utils/is-running-on-client
Exports a boolean indicating whether or not the code is running on the client.
import isRunningOnClient from "@creuna/utils/is-running-on-client";
kebabToCamel(kebabString)
@creuna/utils/kebab-to-camel
kebabString
: string (kebab-case formatted)- returns: string (camelCase formatted)
kebabToCamel("kebab-string");
kebabToPascal(kebabString)
@creuna/utils/kebab-to-pascal
kebabString
: string (kebab-case formatted)- returns: string (PascalCase formatted)
kebabToPascal("kebab-string");
pipe(value, ...functions)
@creuna/utils/pipe
value
: any valuefunctions
: any number of functions- returns: any (the result of running
value
through the pipeline)
A function that emulates the pipeline operator. For more advanced composition stuff, see createPipe
.
pipeValue("a b c", removeSpaces, capitalize, reverseString);
rangeMap(val, inMin, inMax, outMin, outMax)
@creuna/utils/range-map
val
: numberinMin
: numberinMax
: numberoutMin
: numberoutMax
: number- returns: number
Re-maps a number from one numeric range onto another.
rangeMap(0.5, 0, 1, 0, 100);
replaceQueryParameters(url, query)
@creuna/utils/replace-query-parameters
url
: stringquery
: object- returns: string
Adds or replaces query parameters in url
.
replaceQueryParameters("http://lorem.com?param1=a¶m2=b", {
param2: "BBB",
param3: "CCC"
});
scrollToElement(node, offset, duration, delay)
@creuna/utils/scroll-to-element
node
: DOM nodeoffset
: number (default 0
px)duration
: number (default 500
ms)delay
: number (default 0
ms)
Finds the scroll position of node
and scrolls it into view (animated)
scrollToPosition(y, duration)
@creuna/utils/scroll-to-position
y
: numberduration
: number (default 500
ms)
scrollingElement: node
@creuna/utils/scrolling-element
Get the scrolling element (useful because some browsers use document.scrollingElement
, some use document.documentElement
and others use document.body
. When not running on client, scrollingElement
is undefined
.
import scrollingElement from "@creuna/utils/scrolling-element";
if (scrollingElement) {
scrollingElement.scrollTo(0, 100);
}
stripPropertiesWithKeys(object, keys)
@creuna/utils/strip-properties-with-keys
object
: objectvalue
: string[]- returns: object
Returns a shallow copy of object
with properties matching any of the keys
removed
const obj = { a: 1, b: 2, c: 3 };
stripPropertiesWithKeys(obj, ["b", "c"]);
stripPropertiesWithValue(object, value)
@creuna/utils/strip-properties-with-value
object
: objectvalue
: any- returns: object
Returns a shallow copy of object
with properties matching value
removed
const obj = { a: 1, b: 2 };
stripPropertiesWithValue(obj, 2);
stripUndefined(object)
@creuna/utils/strip-undefined
object
: object- returns: object
Returns a shallow copy of object
with properties matching undefined
removed
toQueryString(object[, options])
@creuna/utils/to-query-string
object
: objectoptions
: object || bool (bool is used for encode
)
encode
: bool (default true
)prefix
: string (default '?'
)
- returns: string
Creates a query string representation of object
. Encodes object values by default.
toQueryString({ param: "test", other: "test" });
toQueryString({ param: "test foo", other: "test" });
toQueryString({ param: "test foo", other: "test" }, { encode: false });
toQueryString({ param: "test", other: "test" }, { prefix: "#" });
tryParseJson(json, default)
@creuna/utils/try-parse-json
json
: string (json)default
: any- returns: object if sucessfully parsed;
default
if unsuccessful