CLASSES.IS_HOVERABLE for is-hoverable classname)
focus-visibleis-activeis-busyis-disabledis-focusedis-hoverableis-hoveredis-invalidis-loadingis-not-hoverableis-readonlyis-requiredis-selected!!! Required @uxf/resizer version >= 2.3.2 which supported quality parameter.
[
{
"route": "/generated/static/:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)/:version/:filename(*).:extension.:toFormat",
"source": "https://uxf-base.uxf.dev/:filename+.:extension"
},
{
"route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
"source": "https://s3.uxf.dev/${APP_NAME}-${APP_ENV}/:namespace/:p1/:p2/:filename.:extension"
}
]
import {resizerImageUrl} from "@uxf/core/utils/resizer";
<img src={resizerImageUrl(file, width, height, params)}/>
import {resizerImageUrl} from "@uxf/core/utils/resizer";
import staticImage from "./path/to/static-image.png";
<img src={resizerImageUrl(staticImage, width, height, params)}/>
Helper function for qr code generator.
https://gitlab.uxf.cz/uxf-internal-projects/qr#qr-code-generator
import { qrCodeUrl } from "@uxf/core/qr";
qrCodeUrl("https://www.uxf.cz", { width: 200, margin: 5, errorCorrectionLevel: "H" });
secure?: boolean;httpOnly?: boolean;path?: string;import { Cookie } from "@uxf/core/cookie";
// on client
const cookie = Cookie.create();
// in getInitialProps
const cookie = Cookie.create(ctx);
cookie.has("cookie-name");
cookie.get("cookie-name");
cookie.set("cookie-name", "value", /* ttl in seconds (optional) */, /* options (optional) */)
cookie.delete("cookie-name", /* options (optional) */);
Dynamically adjusts the height of a <textarea> based on its content and an optional number of rows.
element: The <textarea> to adjust.rows (optional): Minimum visible rows. Default is 4.rows parameter, calculated using line-height and font-size.adjustTextareaHeight(textarea); // Adjusts height (min 4 rows)
adjustTextareaHeight(textarea, 6); // With 6-row minimum
In React component:
import { useIsomorphicLayoutEffect } from "@uxf/core-react/hooks/use-isomorphic-layout-effect";
import { isNotNil } from "@uxf/core/utils/is-not-nil";
useIsomorphicLayoutEffect(() => {
const textarea = textareaRef.current;
if (isNotNil(textarea)) {
return;
}
const cleanup = adjustTextareaHeight(textarea);
return () => cleanup();
}, []);
Note: Requires valid
line-heightandfont-sizestyles for accurate sizing.
Checks that value is always type "never".
switch(value) {
case "a":
return "A";
case "b":
return "B";
default:
return assertNever(value);
}
import { assertNotNil } from "@uxf/core/utils/assert-not-nil";
const testObject: { value: number | null } = { value: 10 };
assertNotNil(testObject.value);
// is the same as
if (isNil(testObject.value)) {
throw new Error("Value is null");
}
import { camelCaseToDash } from "@uxf/core/utils/camelCaseToDash";
const example = camelCaseToDash("fooBar"); /* returns "foo-bar" */
import { capitalize } from "@uxf/core/utils/capitalize";
const example = capitalize("hello world"); /* returns "Hello world" */
import { composeRefs } from "@uxf/core/utils/composeRefs";
const firstRef = useRef<HTMLDivElement>(null);
const secondRef = useRef<HTMLDivElement>(null);
const example = <div ref={composeRefs(firstRef, secondRef)} />;
It is our fork of clsx library https://github.com/lukeed/clsx
We will mainly use cx, which is fork of clsx/lite – it accepts ONLY string values! Any non-string arguments are ignored!
import { cx } from "@uxf/core/utils/cx";
// string
cx("hello", true && "foo", false && "bar");
// => "hello foo"
// NOTE: Any non-string input(s) ignored
cx({ foo: true });
//=> ""
The cxa function is full fork of clsx and can take any number of arguments, each of which can be an Object, Array, Boolean, or String.
Important: Any falsy values are discarded! Standalone Boolean values are discarded as well.
import { cxa } from "@uxf/core/utils/cxa";
cxa(true, false, "", null, undefined, 0, NaN);
//=> ""
// Strings (variadic)
cxa("foo", true && "bar", "baz");
//=> "foo bar baz"
// Objects
cxa({ foo:true, bar:false, baz:isTrue() });
//=> "foo baz"
// Objects (variadic)
cxa({ foo:true }, { bar:false }, null, { "--foobar":"hello" });
//=> "foo --foobar"
// Arrays
cxa(["foo", 0, false, "bar"]);
//=> "foo bar"
// Arrays (variadic)
cxa(["foo"], ["", 0, false, "bar"], [["baz", [["hello"], "there"]]]);
//=> "foo bar baz hello there"
// Kitchen sink (with nesting)
cxa("foo", [1 && "bar", { baz:false, bat:null }, ["hello", ["world"]]], "cya");
//=> "foo bar hello world cya"
deepEqualIgnoringKeyOrder compares two values for deep equality while ignoring the order of object keys. It serializes values in a stable way, ensuring that objects with the same data but different key orders are treated as equal. Arrays remain order-sensitive, circular references are handled safely, and primitives are compared by value.
Use this helper for equality checks in tests, memoization, caching, or change detection scenarios where object key order shouldn’t matter. It’s especially useful when comparing payloads, configs, or API responses that may have non-deterministic key ordering.
import { deepEqualIgnoringKeyOrder } from "./deep-equal-ingoring-key-order";
const a = { b: 2, a: 1, nested: { y: 2, x: 1 } };
const b = { nested: { x: 1, y: 2 }, a: 1, b: 2 };
console.log(deepEqualIgnoringKeyOrder(a, b)); // true
const arr1 = [{ a: 1, b: 2 }, { c: 3, d: 4 }];
const arr2 = [{ b: 2, a: 1 }, { d: 4, c: 3 }];
console.log(deepEqualIgnoringKeyOrder(arr1, arr2)); // true (objects equal, same array order)
const arr3 = [{ d: 4, c: 3 }, { b: 2, a: 1 }];
console.log(deepEqualIgnoringKeyOrder(arr1, arr3)); // false (array order differs)
Intended as only way to programmatically download file if there is no option to use native anchor with download html attribute (eg. in form submit events).
import { downloadFile } from "@uxf/core/utils/download-file";
import { FormEventHandler } from "react";
const submitHandler: FormEventHandler<HTMLFormElement> = () => {
downloadFile("https://example.com/file", "file.txt")
};
Escapes all double quotes (") in a string by replacing them with \".
import { escapeQuotes } from "@uxf/core/utils/escape-quotes";
escapeQuotes('The "quick" fox');
// Output: The \"quick\" fox
import { filterNullish } from "@uxf/core/utils/filter-nullish";
filterNullish([0, "text", null, undefined, [], {}]); /* returns [0, "text", [], {}] */
Filters out all properties with null or undefined values from an object, returning a new object with only non-nullish values.
import { filterNullishObjectValues } from "@uxf/core/utils/filter-nullish-object-values";
filterNullishObjectValues({ a: 1, b: null, c: "test", d: undefined });
/* returns { a: 1, c: "test" } */
filterNullishObjectValues({ a: 0, b: "", c: false });
/* returns { a: 0, b: "", c: false } - keeps falsy values that are not nullish */
Filters an object to return only properties that start with aria- or data- prefixes. This utility is useful when you need to pass accessibility and data attributes to HTML elements while excluding other props like event handlers or component-specific props.
import { filterAriaAndDataAttrs } from "@uxf/core/utils/filter-aria-and-data-attrs";
// Filter accessibility and data attributes from component props
const props = {
"aria-label": "Close button",
"data-testid": "close-btn",
className: "button",
onClick: handleClick,
};
const htmlAttrs = filterAriaAndDataAttrs(props);
// Result: { "aria-label": "Close button", "data-testid": "close-btn" }
<button {...htmlAttrs}>Close</button>
// Use case: Passing only safe attributes to a native element
function CustomInput({ label, onChange, ...restProps }) {
const accessibilityAttrs = filterAriaAndDataAttrs(restProps);
return <input {...accessibilityAttrs} onChange={onChange} />;
}
<CustomInput
aria-describedby="helper-text"
data-analytics="email-input"
customProp="ignored"
/>
Appends suitable unit to the byte value of data size.
formatBytes(17.5 * 1024);
//=> "17.5 kB"
import { isEmpty } from "@uxf/core/utils/is-empty";
isEmpty("not-empty"); /* returns false */
isEmpty(""); /* returns true */
isEmpty(["1"]); /* returns false */
isEmpty([]); /* returns true */
Checks if a number is even.
import { isEven } from "@uxf/core/utils/is-even";
isEven(2); /* returns true */
isEven(4); /* returns true */
isEven(1); /* returns false */
isEven(3); /* returns false */
isEven(0); /* returns true */
isEven(-2); /* returns true */
Checks if a number is odd.
import { isOdd } from "@uxf/core/utils/is-odd";
isOdd(1); /* returns true */
isOdd(3); /* returns true */
isOdd(2); /* returns false */
isOdd(4); /* returns false */
isOdd(0); /* returns false */
isOdd(-1); /* returns true */
import { isBrowser } from "@uxf/core/utils/isBrowser";
import { isServer } from "@uxf/core/utils/isServer";
const browserExample = isBrowser; /* returns true if DOM is available */
const serverExample = isServer; /* returns true if DOM is NOT available */
import { isNil } from "@uxf/core/utils/is-nil";
isNil(null); /* returns true */
isNil(undefined); /* returns true */
isNil(true); /* returns false */
isNil(1); /* returns false */
isNil(0); /* returns false */
isNil([]); /* returns false */
isNil("string"); /* returns false */
import { isNotNil } from "@uxf/core/utils/is-not-nil";
isNotNil(null); /* returns false */
isNotNil(undefined); /* returns false */
isNotNil(true); /* returns true */
isNotNil(1); /* returns true */
isNotNil(0); /* returns true */
isNotNil([]); /* returns true */
isNotNil("string"); /* returns true */
Type guard that checks if a value is a plain object. Returns false for arrays, null, Date, Map, Set, RegExp, and other non-plain-object types.
import { isPlainObject } from "@uxf/core/utils/is-plain-object";
isPlainObject({}); /* returns true */
isPlainObject({ a: 1 }); /* returns true */
isPlainObject([]); /* returns false */
isPlainObject([1, 2, 3]); /* returns false */
isPlainObject(new Date()); /* returns false */
isPlainObject(new Map()); /* returns false */
isPlainObject(new Set()); /* returns false */
isPlainObject(/regex/); /* returns false */
isPlainObject(null); /* returns false */
isPlainObject(undefined); /* returns false */
isPlainObject("string"); /* returns false */
isPlainObject(123); /* returns false */
import { last } from "@uxf/core/utils/last";
last([1, 2]); /* returns 2 */
last([]); /* returns undefined */
Converts empty arrays, null, or undefined values to null, leaving all non-empty arrays unchanged. Useful for normalizing form inputs or API data where empty arrays should be treated as null.
import { nonEmptyArrayOrNull } from "@uxf/core/utils/non-empty-array-or-null";
nonEmptyArrayOrNull([]); /* returns null */
nonEmptyArrayOrNull(null); /* returns null */
nonEmptyArrayOrNull(undefined); /* returns null */
nonEmptyArrayOrNull([1, 2, 3]); /* returns [1, 2, 3] */
nonEmptyArrayOrNull(["a", "b"]); /* returns ["a", "b"] */
Converts empty strings and undefined values to null, leaving all other strings unchanged. Useful for normalizing form inputs or API data where empty strings should be treated as null.
import { nonEmptyStringOrNull } from "@uxf/core/utils/non-empty-string-or-null";
nonEmptyStringOrNull(""); /* returns null */
nonEmptyStringOrNull(undefined); /* returns null */
nonEmptyStringOrNull(null); /* returns null */
nonEmptyStringOrNull("test"); /* returns "test" */
nonEmptyStringOrNull(" "); /* returns " " - non-empty string */
Converts null or undefined values to an empty string, leaving all other strings unchanged. Useful for safely displaying nullable string values in UI components.
import { nullishToEmptyString } from "@uxf/core/utils/nullish-to-empty-string";
nullishToEmptyString(null); /* returns "" */
nullishToEmptyString(undefined); /* returns "" */
nullishToEmptyString(""); /* returns "" */
nullishToEmptyString("hello world"); /* returns "hello world" */
Converts NaN, null, or undefined values to null, leaving all valid numbers unchanged. Useful for normalizing numeric inputs or API data where invalid numbers should be treated as null.
import { numberOrNull } from "@uxf/core/utils/number-or-null";
numberOrNull(0); /* returns 0 */
numberOrNull(42); /* returns 42 */
numberOrNull(-1); /* returns -1 */
numberOrNull(3.14); /* returns 3.14 */
numberOrNull(NaN); /* returns null */
numberOrNull(null); /* returns null */
numberOrNull(undefined); /* returns null */
import { slugify } from "@uxf/core/utils/slugify";
const example = slugify("Jak se dnes máte?"); /* returns "jak-se-dnes-mate" */
Deterministically converts any JavaScript value into a JSON string by recursively sorting object keys while preserving array order. It safely handles circular references by replacing them with the string "[Circular]" and never mutates the input. This makes it ideal for creating stable cache keys, hashing inputs, logging, or equality checks that should ignore object key order.
// Example usage
import { stableStringify } from "./stable-stringify";
// Key order does not affect the output
const a = { b: 2, a: 1, nested: { y: 2, x: 1 } };
const b = { nested: { x: 1, y: 2 }, a: 1, b: 2 };
console.log(stableStringify(a));
// -> {"a":1,"b":2,"nested":{"x":1,"y":2}}
console.log(stableStringify(b));
// -> {"a":1,"b":2,"nested":{"x":1,"y":2}} // same as above
// Circular references are handled
const obj: any = { name: "root" };
obj.self = obj;
console.log(stableStringify(obj));
// -> {"name":"root","self":"[Circular]"}
import { trimTrailingZeros } from "@uxf/core/utils/trimTrailingZeros";
const example = trimTrailingZeros("120,450"); /* returns "120,45" */
import { Validator } from "@uxf/core";
Validator.isEmail("...");
Validator.isPhone("...");