@fewings/react/dist/hooks/index.d.mts

Useful react components and hooks

import * as React$1 from 'react';
import { RefObject, SetStateAction, useEffect } from 'react';

declare const useCallbackRef: <T extends (...args: any[]) => any>(callback: T | undefined) => T;

declare const useClickOutside: (handler: (event: MouseEvent) => void, exclude?: RefObject<HTMLElement | null>) => RefObject<HTMLElement | null>;

interface TControlledState<T> {
    value?: T;
    defaultValue?: T;
    onChange?: (state: T) => void;
}
declare const useControlledState: <T>({ value, defaultValue, onChange, }: TControlledState<T>) => readonly [T | undefined, (state: SetStateAction<T>) => void];

interface DragStyle {
    position: "absolute";
    top: number | string;
    left: number | string;
}
interface UseDragPositionProps {
    dir?: "x" | "y" | "xy";
    style?: DragStyle;
    defaultStyle?: DragStyle;
    onChangeStyle?: (style: DragStyle) => void;
    isDragging?: boolean;
    onChangeDragging?: (isDragging: boolean) => void;
}
declare const useDragPosition: (opt?: UseDragPositionProps) => {
    handleRef: React$1.RefObject<HTMLElement | null>;
    boundRef: React$1.RefObject<HTMLElement | null>;
    style: DragStyle;
    isDragging: boolean;
    bounds: {
        minLeft: number;
        maxLeft: number;
        maxTop: number;
        minTop: number;
    };
};

/**
 * A hook that observes element position changes using requestAnimationFrame
 *
 * @warning ⚠️ This hook continuously calls requestAnimationFrame while active,
 * which can be performance intensive. Use with caution and only when necessary.
 * Consider using ResizeObserver or IntersectionObserver for simpler cases.
 *
 * @param ref - Reference to the element to observe
 * @param onChange - Callback function called when position changes
 * @param active - Whether the observer should be active
 */
declare const useElementPositionObserver: (ref: React.RefObject<HTMLElement | null>, onChange: (rect: DOMRect) => void, active: boolean) => void;

declare const useForceUpdate: () => () => void;

declare const useInterval: (callback: () => void, delay: number) => void;

declare const useIsomorphicLayoutEffect: typeof useEffect;

declare const useMount: () => boolean;

interface UsePaginationProps {
    /** 1 or greater */
    currentPage: number;
    /** 1 or greater */
    totalPages: number;
    maxVisiblePageButtons: number;
}
interface UsePaginationReturn {
    pageNumbers: number[];
    currentGroupIdx: number;
    totalGroupLength: number;
    isLastGroup: boolean;
}
/**
 * values are not index, but literal page number
 */
declare const usePagination: ({ currentPage, totalPages, maxVisiblePageButtons, }: UsePaginationProps) => UsePaginationReturn;

declare const usePrevState: <T>(state: T | undefined) => T | undefined;

declare const useThrow: () => (v: Error | any) => void;

export { type DragStyle, useCallbackRef, useClickOutside, useControlledState, useDragPosition, useElementPositionObserver, useForceUpdate, useInterval, useIsomorphicLayoutEffect, useMount, usePagination, usePrevState, useThrow };