@uxf/core

UXF Core

Cookie

• Cookie options
  • 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) */);

Hooks

import { useBodyScrollLock } from "@uxf/core/hooks/useBodyScrollLock";

const innerRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState<boolean>();

const clearAllOnclose = false; /* optionally call clearAllBodyScrollLocks methot on unmount */

useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, clearAllOnclose, { /* options from "body-scroll-lock" npm package */ });

<div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>

import { useIsMounted } from "@uxf/core/hooks/useIsMounted";

const isMounted = useIsMounted();

import { useIsomorphicLayoutEffect } from "@uxf/core/hooks/useIsomorphicLayoutEffect";

useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);

import { useKey } from "@uxf/core/hooks/useKey";
import { useCallback } from "react";

const innerRef = useRef<HTMLDivElement>(null);
const disabled = false; // eg. for passing disabled state

useKey<HTMLDivElement>(innerRef, "Enter", () => console.log("callback"), "keydown", disabled);

<div ref={innerRef} tabIndex={0}>Element with callback triggerable by enter key.</div>

import { useKeydownToMouseClick } from "@uxf/core/hooks/useKeydownToMouseClick";

const innerRef = useRef<HTMLDivElement>(null);
const disabled = false; // eg. for passing disabled state

useKeydownToMouseClick<HTMLDivElement>(innerRef, (e: KeyboardEvent) => e.key === "Enter", disabled);

<div onClick={() => console.log("success")} ref={innerRef}>Element with onClick triggerable both by mouse click and enter key.</div>

import { useMinWindowWidth } from "@uxf/core/hooks/useMinWindowWidth";

const isDesktop = useMinWindowWidth(992 /* desired min window width */, 1280 /* initial window width (optional) */);

import { usePagination } from "@uxf/core/hooks/usePagination";

const paginationItems = usePagination({ page: 1, count: 10 })

import { useRafState } from "@uxf/core/hooks/useRafState";

const [state, setState] = useRafState<boolean>(false);

import { useUnmount } from "@uxf/core/hooks/useUnmount";

const exampleCallback = () => {};

useUnmount(exampleCallback());

import { useUpdateEffect } from "@uxf/core/hooks/useUpdateEffect";

useUpdateEffect(() => {/* code */}, [/* deps */]);

import { useWindowScroll } from "@uxf/core/hooks/useWindowScroll";

const { x, y } = useWindowScroll();

import { useWindowSize } from "@uxf/core/hooks/useWindowSize";

const { width, height } = useWindowSize(1280 /* initial window width (optional) */, 800 /* initial window height (optional) */);

Next

import { queryParamToString, queryParamToNumber } from "@uxf/core/next";

queryParamToNumber(ctx.query.id);
queryParamToString(ctx.query.name);

Utils

import { cameCaseToDash } from "@uxf/core/utils/cameCaseToDash";

const example = cameCaseToDash("fooBar") /* returns "foo-bar" */

import { composeRefs } from "@uxf/core/utils/composeRefs";

const firstRef = useRef<HTMLDivElement>(null);
const secondRef = useRef<HTMLDivElement>(null);

const example = <div ref={composeRefs(firstRef, secondRef)} />;

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 { slugify } from "@uxf/core/utils/slugify";

const example = slugify("Jak se dnes máte?") /* returns "jak-se-dnes-mate" */

import { trimTrailingZeros } from "@uxf/core/utils/trimTrailingZeros";

const example = trimTrailingZeros("120,450") /* returns "120,45" */

Validators

import { Validator } from "@uxf/core";

Validator.isEmail("...");
Validator.isPhone("...");

Changelog

v1.10.0

1.10.0 (2021-02-08)

Features

• package: add useWindowScroll hook (85b2038)