next-navigation-progress/dist/index.d.ts

A customizable navigation progress bar for Next.js apps with React 19 support

import * as react from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

/**
 * Internal hook for managing progress state
 * @internal
 */
declare const useProgress: () => {
    startNewProgress: () => void;
    progress: number;
    optimisticObj: {
        loading: boolean;
    };
    stateObj: {
        showing: boolean;
    };
};
/**
 * Provider component that manages navigation progress state
 * Wrap your application with this provider to enable navigation progress functionality
 *
 * @example
 * ```tsx
 * <NextNavigationProgressProvider>
 *   <NextNavigationProgressBar />
 *   {children}
 * </NextNavigationProgressProvider>
 * ```
 */
declare const NextNavigationProgressProvider: ({ children, }: {
    children: React.ReactNode;
}) => react_jsx_runtime.JSX.Element;
/**
 * Progress bar component that displays navigation progress
 * Must be used inside NextNavigationProgressProvider
 *
 * @example
 * ```tsx
 * <NextNavigationProgressProvider>
 *   <NextNavigationProgressBar />
 *   {children}
 * </NextNavigationProgressProvider>
 * ```
 */
declare const NextNavigationProgressBar: () => react_jsx_runtime.JSX.Element;
/**
 * Hook to access navigation progress state and controls
 * Must be used inside NextNavigationProgressProvider
 *
 * @returns {Object} Progress state and control functions
 * @returns {number} progress - Current progress value (0-100)
 * @returns {Function} startNewProgress - Function to start a new progress animation
 * @returns {Object} optimisticObj - Object containing loading state
 * @returns {Object} stateObj - Object containing visibility state
 *
 * @example
 * ```tsx
 * const { progress, startNewProgress, optimisticObj, stateObj } = useNavigationProgress();
 * ```
 */
declare const useNavigationProgress: () => {
    progress: number;
    startNewProgress: () => void;
    optimisticObj: {
        loading: boolean;
    };
    stateObj: {
        showing: boolean;
    };
};
/**
 * Pre-configured Link component that automatically triggers navigation progress
 * Wraps Next.js Link component with progress bar integration
 *
 * @param {React.ReactNode} children - Link content
 * @param {string} className - CSS class name
 * @param {string} href - Destination URL
 * @param {string} [target] - Link target attribute
 * @param {Function} [onClick] - Custom click handler
 * @param {boolean} [prefetch] - Next.js prefetch behavior
 * @param {React.CSSProperties} [style] - Inline styles
 *
 * @example
 * ```tsx
 * <NavigationLink href="/about" className="nav-link">
 *   About Page
 * </NavigationLink>
 * ```
 */
declare const NavigationLink: react.NamedExoticComponent<{
    children: React.ReactNode;
    className?: string;
    href: string;
    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
    target?: string;
    prefetch?: boolean;
    style?: React.CSSProperties;
}>;

export { NavigationLink, NextNavigationProgressBar, NextNavigationProgressProvider, useNavigationProgress, useProgress };