Front-utils/react-hooks

Hooks

name	description
useAnimatedValue	The useAnimatedValue function is a custom React hook that animates a numeric value from 0 to a specified finishValue over a given time period. It uses the requestAnimationFrame API to update the value smoothly and returns the animated value.
useAutoScroll	The useAutoScroll is a custom React hook that automatically scrolls a parent element to center a target child element within its view. It uses useRef to reference the parent and target elements, and useCallback to calculate and set the scroll position based on the target's offset and the parent's height.
useCountDownTimer	The useCountDownTimer is a custom React hook that calculates the remaining time in seconds until a specified end date. It optionally formats the result into hours, minutes, and seconds. The hook also tracks if the countdown has been cancelled.
useElementSizeObserver	The useElementSizeObserver is a custom React hook that observes the size of a DOM element and returns its dimensions. It uses the ResizeObserver API to detect changes in the element's size and updates the state accordingly.
useFontLoader	The useFontLoader is a React hook that loads a list of fonts asynchronously. It ensures that fonts are loaded only once by checking a global flag and uses the FontFace API to add fonts to the document.
useIsMounted	The code defines a custom React hook useIsMounted that returns a reference object indicating whether a component is currently mounted.
useNativeResizeObserver	The code defines a custom React hook useNativeResizeObserver that utilizes the ResizeObserver API to observe changes in the size of a specified DOM element.
useNodeState	The useNodeState function is a custom React hook that manages the state of an HTMLElement or null. It provides a way to store and update a reference to a DOM node.
usePrevious	The usePrevious function is a custom React hook that stores the previous value of a given state or prop. It uses the useRef hook to persist the value across renders and the useEffect hook to update the stored value whenever the input value changes.
usePropsChanged	The usePropsChanged function is a custom React hook that determines if a given value has changed since the last render. It uses another custom hook usePrevious to track the previous value and a useRef to count renders.
useResizeObserver	The useResizeObserver is a custom React hook that observes changes in the size of an HTML element and provides the current size. It uses a ResizeObserver to detect size changes and updates the state with debounced size information to prevent excessive re-renders.
useScrollObserver	The useScrollObserver is a custom React hook that uses the Intersection Observer API to trigger a fetchData function when a specified DOM element (observerTarget) becomes visible in the viewport.
useStateBool	The useStateBool function is a custom React hook that manages a boolean state. It provides an initial state and two functions to set the state to true or false.

Examples

useAnimatedValue

const animatedValue = useAnimatedValue(100, { time: 2000, digitAfterDot: 1 });

useAutoScroll

const { parentElementRef, userElementRef } = useAutoScroll({
  itemHeight: 50,
  scrollTrigger: true,
});

return (
  <div ref={parentElementRef} style={{ overflowY: 'auto', height: '200px' }}>
    <div ref={userElementRef}>Target Element</div>
  </div>
);

useCountDownTimer

const { seconds, minutes, hours, isCancelled } = useCountDownTimer({
    endIsoDate: "2023-12-31T23:59:59Z",
    formatted: true,
});

useElementSizeObserver

const MyComponent = () => {
    const ref = useRef<HTMLDivElement>(null);
    const size = useElementSizeObserver({ isActive: true, node: ref.current });

    return (
        <div ref={ref}>
            {size ? `Width: ${size.width}, Height: ${size.height}` : 'Loading...'}
        </div>
    );
};

useFontLoader

const fonts = [
  { name: 'Roboto', url: Promise.resolve({ default: '/fonts/roboto.woff2' }), descriptors: { weight: '400' } },
  { name: 'Open Sans', url: Promise.resolve({ default: '/fonts/open-sans.woff2' }), descriptors: { weight: '700' } }
];

useFontLoader(fonts);

useIsMounted

const isMountedRef = useIsMounted();

useEffect(() => {
    if (isMountedRef.current) {
        console.log("Component is mounted");
    }
}, []);

useNativeResizeObserver

const MyComponent = () => {
    const ref = useRef<HTMLDivElement | null>(null);

    useNativeResizeObserver({
        node: ref.current,
        callback: (entries) => {
            entries.forEach(entry => {
                console.log('Size changed:', entry.contentRect);
            });
        }
    });

    return <div ref={ref}>Resizable content</div>;
};

useNodeState

const { node, updateNode } = useNodeState();

// To update the node
const someElement = document.getElementById('some-id');
updateNode(someElement);

// To access the current node
console.log(node); // Outputs: <HTMLElement> or null

usePrevious

import { usePrevious } from './usePrevious';

function MyComponent({ someProp }) {
    const prevProp = usePrevious(someProp);

    useEffect(() => {
        console.log('Previous prop:', prevProp);
        console.log('Current prop:', someProp);
    }, [someProp]);

    return <div>{someProp}</div>;
}

usePropsChanged

const { isChanged, prevVal } = usePropsChanged(someValue);
if (isChanged) {
    console.log("Value has changed from", prevVal, "to", someValue);
}

useResizeObserver

const MyComponent = () => {
    const { setNode, size } = useResizeObserver<HTMLDivElement>({ lazy: false });

    return (
        <div ref={setNode}>
            {size && (
                <p>
                    Width: {size.offsetWidth}, Height: {size.clientHeight}
                </p>
            )}
        </div>
    );
};

useScrollObserver

const ref = useRef<HTMLDivElement | null>(null);

useScrollObserver({
    observerTarget: ref,
    fetchData: () => console.log("Element is visible"),
});

return <div ref={ref}>Watch me!</div>;

useStateBool

const [isTrue, setTrue, setFalse] = useStateBool(false);

console.log(isTrue); // false
setTrue();
console.log(isTrue); // true
setFalse();
console.log(isTrue); // false