@supunlakmal/hooks/dist/hooks/data-fetching/useIdleFetch.js

A collection of reusable React hooks

import { useState, useCallback } from 'react';
import { useIdleTimer } from '../timers-intervals/useIdleTimer';
import { useFetch } from './useFetch';
/**
 * A hook that combines useIdleTimer and useFetch to trigger a data fetch
 * only when the user becomes active after a period of inactivity.
 *
 * @template T The expected data type from the fetch request.
 * @param targetUrl The URL to fetch data from when the user becomes active.
 * @param options Configuration options including idleTimeout and optional fetchOptions/idleDebounce.
 * @returns The result object from useFetch ({ data, error, loading }).
 */
export function useIdleFetch(targetUrl, options) {
    const { idleTimeout, fetchOptions, idleDebounce } = options;
    // State to control the URL passed to useFetch. Start with null.
    const [fetchUrl, setFetchUrl] = useState(null);
    // Call useFetch, passing the stateful URL and options
    const fetchResult = useFetch(fetchUrl, fetchOptions);
    // Callback for when the user becomes active
    const handleOnActive = useCallback(() => {
        console.log('User became active, initiating fetch...');
        // Set the URL to trigger the fetch
        setFetchUrl(targetUrl);
    }, [targetUrl]);
    // Callback for when the user goes idle (required by useIdleTimer)
    const handleOnIdle = useCallback(() => {
        // console.log('User went idle...');
        // Optionally reset fetchUrl to null if you want to refetch *every* time user becomes active
        // setFetchUrl(null);
    }, []);
    // Initialize useIdleTimer
    useIdleTimer({
        onActive: handleOnActive,
        onIdle: handleOnIdle, // Provide the required onIdle
        timeout: idleTimeout,
        debounce: idleDebounce, // Pass optional debounce
    });
    // Return the fetch results (data, error, loading)
    return fetchResult;
}
//# sourceMappingURL=useIdleFetch.js.map