Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@uxf/core

Package Overview
Dependencies
0
Maintainers
1
Versions
40
Issues
File Explorer

Advanced tools

@uxf/core

UXF Core

    2.1.4latest

Version published
Maintainers
1
Yearly downloads
5,586
increased by103.72%

Weekly downloads

Readme

Source

UXF Core

Constants

  • common modifier classnames for interactive elements (eg. CLASSES.IS_HOVERABLE for is-hoverable classname)
    • focus-visible
    • is-active
    • is-busy
    • is-disabled
    • is-focused
    • is-hovered
    • is-hoverable
    • is-invalid
    • is-readonly
    • is-selected
    • is-not-hoverable
  • 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"; import { useState } from "react"; const innerRef = useRef<HTMLDivElement>(null); const [isOpen, setIsOpen] = useState<boolean>(); const clearAllOnclose = false; useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, { allowTouchMove: undefined, // https://github.com/willmcpo/body-scroll-lock#allowtouchmove clearAllOnClose: false, // optionally call clearAllBodyScrollLocks method on unmount reserveScrollBarGap: undefined, // https://github.com/willmcpo/body-scroll-lock#reservescrollbargap }); <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 { useRef } from "react"; const targetRef = useRef<HTMLDivElement>(null); const disabled = false; // eg. for passing disabled state useKey<HTMLDivElement>("Enter", () => console.log("callback"), { disabled, targetRef, // if not provided, then `document` will be used type: "keydown" }); <div ref={targetRef} tabIndex={0}>Element with callback triggerable by enter key.</div> import { useMinWindowWidth } from "@uxf/core/hooks/useMinWindowWidth"; const isDesktop = useMinWindowWidth(1200); const example = isDesktop ? "desktop" : "tablet"; 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 windowScroll = useWindowScroll(); const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top"; import { useWindowSize } from "@uxf/core/hooks/useWindowSize"; const windowSize = useWindowSize(); const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet"; import { useFocusTrap } from "@uxf/core/hooks/useFocusTrap"; import { useState } from "react"; const [active, setActive] = useState<boolean>(); const focusTrapRef = useFocusTrap(active); <div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div> import { useFocusReturn } from "@uxf/core/hooks/useFocusReturn"; import { useState } from "react"; const [active, setActive] = useState<boolean>(); // Returns focus to last active element, e.g. in Modal or Popover useFocusReturn(active); import { useAnchorProps } from "@uxf/core/hooks/useAnchorProps"; import { AnchorHTMLAttributes } from "react"; // extends <a /> by `analyticsCallback`, `disabled`, `loading`, `submit` props const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({ analyticsCallback: () => console.log("analytics"), disabled: false, href: "https://www.google.com/", loading: false, onClick: () => console.log("success"), submit: true, // simulate <button type="submit" /> function }); <a {...anchorProps}>Click me</a> // example with generics import { UseAnchorProps, useAnchorProps } from "@uxf/core/hooks/useAnchorProps"; import { AnchorHTMLAttributes } from "react"; interface Props extends UseAnchorProps, AnchorHTMLAttributes<HTMLAnchorElement> { customProp?: boolean; } const anchorProps = useAnchorProps<Props>({ customProp: true, loading: false, href: "https://www.google.com/", }); <a {...anchorProps}>Click me</a> import { useButtonProps } from "@uxf/core/hooks/useButtonProps"; import { ButtonHTMLAttributes } from "react"; // extends <button /> by `analyticsCallback` and `loading` props const buttonProps = useButtonProps<ButtonHTMLAttributes<HTMLButtonElement>>({ analyticsCallback: () => console.log("analytics"), disabled: false, loading: false, onClick: () => console.log("success"), type: "submit", }); <button {...buttonProps}>Click me</button> // example with generics import { UseButtonProps, useButtonProps } from "@uxf/core/hooks/useButtonProps"; import { ButtonHTMLAttributes } from "react"; interface Props extends UseButtonProps, ButtonHTMLAttributes<HTMLButtonElement> { customProp?: boolean; } const buttonProps = useButtonProps<Props>({ customProp: true, loading: false, type: "submit", }); <button {...buttonProps}>Click me</button> import { useClickableProps } from "@uxf/core/hooks/useClickableProps"; import { HTMLAttributes } from "react"; // extends any HTML element by `analyticsCallback`, `disabled`, `loading`, `submit` props const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({ analyticsCallback: () => console.log("analytics"), disabled: false, loading: false, onClick: () => console.log("success"), submit: true, // simulate <button type="submit" /> function }); <div {...clickableProps}>Click me</div> // example with generics import { UseClickableProps, useClickableProps } from "@uxf/core/hooks/useClickableProps"; import { HTMLAttributes } from "react"; interface Props extends UseClickableProps, HTMLAttributes<HTMLDivElement> { customProp?: boolean; } const buttonProps = useClickableProps<Props>({ customProp: true, hidden: false, loading: false, }); <button {...buttonProps}>Click me</button> import { useMouseDragToScroll } from "@uxf/core/hooks/useMouseDragToScroll"; const targetRef = useRef<HTMLDivElement>(null); const style = useMouseDragToScroll(scrollRef); <div style={style}>Drag to scroll</div> import { useInputFocus } from "@uxf/core/hooks/useInputFocus"; const focusRef = useRef<HTMLInputElement>(null); // or HTMLTextAreaElement const { onBlur, onFocus } = props; const input = useInputFocus(focusRef, onBlur, onFocus); <div>Input is {input.focused}</div> <button onClick={input.focus}>Focus input</button> <input onBlur={input.onBlur} onFocus={input.onFocus} ref={focusRef} />

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 { cx } from "@uxf/core/utils/cx"; /* fork of https://github.com/lukeed/clsx */ const example = cx("foo", true && "bar", "baz", false && "bam", undefined) /* returns "foo bar baz" */ 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("...");
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc