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.
@uxf/core-react
Advanced tools
import { useBodyScrollLock } from "@uxf/core-react/hooks/use-body-scroll-lock";
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-react/hooks/use-is-mounted";
const isMounted = useIsMounted();
import { useIsomorphicLayoutEffect } from "@uxf/core-react/hooks/use-isomorphic-layout-effect";
useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);
import { useKey } from "@uxf/core-react/hooks/use-key";
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-react/hooks/use-min-window-width";
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-react/hooks/use-pagination";
const paginationItems = usePagination({ page: 1, count: 10 })
import { useRafState } from "@uxf/core-react/hooks/use-raf-state";
const [state, setState] = useRafState<boolean>(false);
import { useOnUnmount } from "@uxf/core-react/hooks/use-on-unmount";
const exampleCallback = () => {};
useOnUnmount(exampleCallback());
import { useOnUpdate } from "@uxf/core-react/hooks/use-on-update";
useOnUpdate(() => {/* code */}, [/* deps */]);
import { useWindowScroll } from "@uxf/core-react/hooks/use-window-scroll";
const windowScroll = useWindowScroll();
const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top";
import { useWindowSize } from "@uxf/core-react/hooks/use-window-size";
const windowSize = useWindowSize();
const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet";
import { useFocusTrap } from "@uxf/core-react/hooks/use-focus-trap";
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-react/hooks/use-focus-return";
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-react/hooks/use-anchor-props";
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-react/hooks/use-anchor-props";
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-react/hooks/use-button-props";
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-react/hooks/use-button-props";
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-react/hooks/use-clickable-props";
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-react/hooks/use-clickable-props";
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-react/hooks/use-mouse-drag-to-scroll";
const targetRef = useRef<HTMLDivElement>(null);
const style = useMouseDragToScroll(scrollRef);
<div style={style}>Drag to scroll</div>
import { useInputFocus } from "@uxf/core-react/hooks/use-input-focus";
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-react/hooks/use-latest";
const latestState = useLatest(someUnstableWhatever);
useEffect(() => {
latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
}, [latestState])
import { usePrevious } from "@uxf/core-react/hooks/use-previous";
const previousState = usePrevious(someUnstableWhatever);
useEffect(() => {
previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
}, [previousState])
FAQs
UXF Core
The npm package @uxf/core-react receives a total of 224 weekly downloads. As such, @uxf/core-react popularity was classified as not popular.
We found that @uxf/core-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.