Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
CLASSES.IS_HOVERABLE
for is-hoverable classname)
focus-visible
is-active
is-busy
is-disabled
is-focused
is-hoverable
is-hovered
is-invalid
is-loading
is-not-hoverable
is-readonly
is-required
is-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)}/>
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) */);
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 isDesktopWithDebounce = useMinWindowWidth(1200, 200); // will be updated every 200 ms
const example = isDesktop ? "desktop" : "tablet";
const debouncedExample = isDesktopWithDebounce ? "debouncedDesktop" : "debouncedTablet";
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 { useOnUnmount } from "@uxf/core/hooks/useOnUnmount";
const exampleCallback = () => {};
useOnUnmount(exampleCallback());
import { useOnUpdate } from "@uxf/core/hooks/useOnUpdate";
useOnUpdate(() => {/* 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"),
type: "submit", // 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"),
type: "submit", // 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} />
import { useLatest } from "@uxf/core/hooks/useLatest";
const latestState = useLatest(someUnstableWhatever);
useEffect(() => {
latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
}, [latestState])
import { usePrevious } from "@uxf/core/hooks/usePrevious";
const previousState = usePrevious(someUnstableWhatever);
useEffect(() => {
previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
}, [previousState])
import { queryParamToString, queryParamToNumber } from "@uxf/core/next";
queryParamToNumber(ctx.query.id);
queryParamToString(ctx.query.name);
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 { forwardRef } from "@uxf/core/utils/forwardRef";
interface Props {
className?: string;
}
// will enforce 'displayName'
export const ExampleComponent = forwardRef<HTMLDivElement, Props>("ExampleComponent", (props, ref) => {
return <div className={props.className} ref={ref} />;
});
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" */
import { Validator } from "@uxf/core";
Validator.isEmail("...");
Validator.isPhone("...");
FAQs
UXF Core
The npm package @uxf/core receives a total of 205 weekly downloads. As such, @uxf/core popularity was classified as not popular.
We found that @uxf/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.