react-vt-router/dist/index.d.ts

A tiny React router with View Transitions using native Web APIs.

import * as react from 'react';
import { ReactNode, AnchorHTMLAttributes, CSSProperties } from 'react';

type URLPatternLike = {
    exec(input: URL | string): {
        pathname: {
            groups: Record<string, string>;
        };
    } | null;
};
type LocationLike = {
    pathname: string;
    search: string;
    hash: string;
    state: any;
    key: string;
};
type ViewTransitionConfig = {
    name?: string;
    className?: string;
    attribute?: string;
    onStart?: () => void;
    onReady?: () => void;
    onFinished?: () => void;
};
type NavigateOptions = {
    replace?: boolean;
    state?: any;
    viewTransition?: boolean | string | ViewTransitionConfig;
    scroll?: ScrollBehavior;
};
type NavigateFunction = ((to: string | number, options?: NavigateOptions) => void) & {
    back: () => void;
    forward: () => void;
    go: (delta: number) => void;
};
type RouteObject = {
    path?: string;
    index?: boolean;
    caseSensitive?: boolean;
    element?: ReactNode;
    children?: RouteObject[];
};
type CompiledRoute = RouteObject & {
    id: string;
    fullPath: string;
    pattern: URLPatternLike | null;
    parent?: CompiledRoute;
    children?: CompiledRoute[];
};
type Match = {
    route: CompiledRoute;
    params: Record<string, string>;
};
type RouterState = {
    location: LocationLike;
};
type BrowserRouterProps = {
    children: ReactNode;
    enableNavigationAPI?: boolean;
    defaultViewTransition?: boolean | string | ViewTransitionConfig;
};
declare function BrowserRouter({ children, enableNavigationAPI, defaultViewTransition, }: BrowserRouterProps): ReactNode;
declare function useRouterState(): RouterState;
declare function useLocation(): LocationLike;
declare function useNavigate(): NavigateFunction;
declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
declare function useSearchParams(): [
    URLSearchParams,
    (nextInit: URLSearchParams | string | Record<string, string> | [string, string][], options?: {
        replace?: boolean;
    }) => void
];
type RouteProps = {
    path?: string;
    index?: boolean;
    element?: ReactNode;
    caseSensitive?: boolean;
    redirectTo?: string;
    children?: ReactNode;
};
declare function Route(_props: RouteProps): ReactNode;
type RoutesProps = {
    children: ReactNode;
};
declare function Routes({ children }: RoutesProps): ReactNode;
declare function Outlet(props?: {
    context?: any;
}): ReactNode;
type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
    to: string;
    replace?: boolean;
    viewTransition?: boolean | string | ViewTransitionConfig;
    scroll?: ScrollBehavior;
};
declare function Link({ to, replace, onClick, target, rel, viewTransition, scroll, ...rest }: LinkProps): react.JSX.Element;
type NavigateProps = {
    to: string | number;
    replace?: boolean;
    state?: any;
    viewTransition?: boolean | string | ViewTransitionConfig;
};
declare function Navigate({ to, replace, state, viewTransition }: NavigateProps): ReactNode;
declare function useRoutes(routeObjects: RouteObject[]): ReactNode;
declare function createRoutesFromElements(children: ReactNode): RouteObject[];
type PathPattern = string;
type PathMatch = {
    params: Record<string, string>;
    pathname: string;
    pattern: PathPattern;
};
declare function useMatch(pattern: PathPattern): PathMatch | null;
type NavLinkProps = Omit<LinkProps, "className" | "style"> & {
    className?: string | ((args: {
        isActive: boolean;
        isPending: boolean;
    }) => string | undefined);
    style?: CSSProperties | ((args: {
        isActive: boolean;
        isPending: boolean;
    }) => CSSProperties | undefined);
    end?: boolean;
};
declare function NavLink({ className, style, end, ...rest }: NavLinkProps): react.JSX.Element;
declare function useOutletContext<T = unknown>(): T;
declare function OutletWithContext({ context }: {
    context?: any;
}): ReactNode;
declare function useResolvedPath(to: string): string;
declare const _default: {
    BrowserRouter: typeof BrowserRouter;
    Routes: typeof Routes;
    Route: typeof Route;
    Link: typeof Link;
    NavLink: typeof NavLink;
    Navigate: typeof Navigate;
    Outlet: typeof Outlet;
    OutletWithContext: typeof OutletWithContext;
    useNavigate: typeof useNavigate;
    useLocation: typeof useLocation;
    useParams: typeof useParams;
    useSearchParams: typeof useSearchParams;
    useMatch: typeof useMatch;
    useOutletContext: typeof useOutletContext;
    useRoutes: typeof useRoutes;
    createRoutesFromElements: typeof createRoutesFromElements;
};

export { BrowserRouter, Link, NavLink, Navigate, Outlet, OutletWithContext, Route, Routes, createRoutesFromElements, _default as default, useLocation, useMatch, useNavigate, useOutletContext, useParams, useResolvedPath, useRouterState, useRoutes, useSearchParams };
export type { BrowserRouterProps, CompiledRoute, LinkProps, LocationLike, Match, NavLinkProps, NavigateFunction, NavigateOptions, NavigateProps, PathMatch, PathPattern, RouteObject, RouteProps, RoutesProps, ViewTransitionConfig };