@uxf/core-react

UXF Core-React

Hooks

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])