@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 [isOpen, setIsOpen] = useState<boolean>();

const scrollLockTargetRef = useBodyScrollLock<HTMLDivElement>(isOpen);

<div ref={scrollLockTargetRef}>Element with scroll lock outside</div>

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

const isMounted = useIsMounted();

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

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

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 { 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.8.0

1.8.0 (2021-02-07)

Features

• usePagination: added pagination hook (ffd418b)