index.d.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. /**
  2. * NOTE: If you refactor this to split up the modules into separate files,
  3. * you'll need to update the rollup config for react-router-dom-v5-compat.
  4. */
  5. import * as React from "react";
  6. import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To, DataStrategyFunction, PatchRoutesOnNavigationFunction } from "react-router";
  7. import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod, BlockerFunction } from "@remix-run/router";
  8. import { UNSAFE_ErrorResponseImpl as ErrorResponseImpl } from "@remix-run/router";
  9. import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget, FetcherSubmitOptions } from "./dom";
  10. import { createSearchParams } from "./dom";
  11. export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
  12. export { createSearchParams, ErrorResponseImpl as UNSAFE_ErrorResponseImpl };
  13. export type { ActionFunction, ActionFunctionArgs, AwaitProps, Blocker, BlockerFunction, DataRouteMatch, DataRouteObject, DataStrategyFunction, DataStrategyFunctionArgs, DataStrategyMatch, DataStrategyResult, ErrorResponse, Fetcher, FutureConfig, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, PatchRoutesOnNavigationFunction, PatchRoutesOnNavigationFunctionArgs, Path, PathMatch, Pathname, PathParam, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, } from "react-router";
  14. export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, replace, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
  15. /** @internal */
  16. export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router";
  17. declare global {
  18. var __staticRouterHydrationData: HydrationState | undefined;
  19. var __reactRouterVersion: string;
  20. interface Document {
  21. startViewTransition(cb: () => Promise<void> | void): ViewTransition;
  22. }
  23. }
  24. interface DOMRouterOpts {
  25. basename?: string;
  26. future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
  27. hydrationData?: HydrationState;
  28. dataStrategy?: DataStrategyFunction;
  29. patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
  30. window?: Window;
  31. }
  32. export declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
  33. export declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
  34. type ViewTransitionContextObject = {
  35. isTransitioning: false;
  36. } | {
  37. isTransitioning: true;
  38. flushSync: boolean;
  39. currentLocation: Location;
  40. nextLocation: Location;
  41. };
  42. declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
  43. export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
  44. type FetchersContextObject = Map<string, any>;
  45. declare const FetchersContext: React.Context<FetchersContextObject>;
  46. export { FetchersContext as UNSAFE_FetchersContext };
  47. interface ViewTransition {
  48. finished: Promise<void>;
  49. ready: Promise<void>;
  50. updateCallbackDone: Promise<void>;
  51. skipTransition(): void;
  52. }
  53. /**
  54. * Given a Remix Router instance, render the appropriate UI
  55. */
  56. export declare function RouterProvider({ fallbackElement, router, future, }: RouterProviderProps): React.ReactElement;
  57. export interface BrowserRouterProps {
  58. basename?: string;
  59. children?: React.ReactNode;
  60. future?: Partial<FutureConfig>;
  61. window?: Window;
  62. }
  63. /**
  64. * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  65. */
  66. export declare function BrowserRouter({ basename, children, future, window, }: BrowserRouterProps): React.JSX.Element;
  67. export interface HashRouterProps {
  68. basename?: string;
  69. children?: React.ReactNode;
  70. future?: Partial<FutureConfig>;
  71. window?: Window;
  72. }
  73. /**
  74. * A `<Router>` for use in web browsers. Stores the location in the hash
  75. * portion of the URL so it is not sent to the server.
  76. */
  77. export declare function HashRouter({ basename, children, future, window, }: HashRouterProps): React.JSX.Element;
  78. export interface HistoryRouterProps {
  79. basename?: string;
  80. children?: React.ReactNode;
  81. future?: FutureConfig;
  82. history: History;
  83. }
  84. /**
  85. * A `<Router>` that accepts a pre-instantiated history object. It's important
  86. * to note that using your own history object is highly discouraged and may add
  87. * two versions of the history library to your bundles unless you use the same
  88. * version of the history library that React Router uses internally.
  89. */
  90. declare function HistoryRouter({ basename, children, future, history, }: HistoryRouterProps): React.JSX.Element;
  91. declare namespace HistoryRouter {
  92. var displayName: string;
  93. }
  94. export { HistoryRouter as unstable_HistoryRouter };
  95. export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  96. reloadDocument?: boolean;
  97. replace?: boolean;
  98. state?: any;
  99. preventScrollReset?: boolean;
  100. relative?: RelativeRoutingType;
  101. to: To;
  102. viewTransition?: boolean;
  103. }
  104. /**
  105. * The public API for rendering a history-aware `<a>`.
  106. */
  107. export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
  108. export type NavLinkRenderProps = {
  109. isActive: boolean;
  110. isPending: boolean;
  111. isTransitioning: boolean;
  112. };
  113. export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
  114. children?: React.ReactNode | ((props: NavLinkRenderProps) => React.ReactNode);
  115. caseSensitive?: boolean;
  116. className?: string | ((props: NavLinkRenderProps) => string | undefined);
  117. end?: boolean;
  118. style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
  119. }
  120. /**
  121. * A `<Link>` wrapper that knows if it's "active" or not.
  122. */
  123. export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
  124. /**
  125. * Form props shared by navigations and fetchers
  126. */
  127. interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
  128. /**
  129. * The HTTP verb to use when the form is submit. Supports "get", "post",
  130. * "put", "delete", "patch".
  131. */
  132. method?: HTMLFormMethod;
  133. /**
  134. * `<form encType>` - enhancing beyond the normal string type and limiting
  135. * to the built-in browser supported values
  136. */
  137. encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
  138. /**
  139. * Normal `<form action>` but supports React Router's relative paths.
  140. */
  141. action?: string;
  142. /**
  143. * Determines whether the form action is relative to the route hierarchy or
  144. * the pathname. Use this if you want to opt out of navigating the route
  145. * hierarchy and want to instead route based on /-delimited URL segments
  146. */
  147. relative?: RelativeRoutingType;
  148. /**
  149. * Prevent the scroll position from resetting to the top of the viewport on
  150. * completion of the navigation when using the <ScrollRestoration> component
  151. */
  152. preventScrollReset?: boolean;
  153. /**
  154. * A function to call when the form is submitted. If you call
  155. * `event.preventDefault()` then this form will not do anything.
  156. */
  157. onSubmit?: React.FormEventHandler<HTMLFormElement>;
  158. }
  159. /**
  160. * Form props available to fetchers
  161. */
  162. export interface FetcherFormProps extends SharedFormProps {
  163. }
  164. /**
  165. * Form props available to navigations
  166. */
  167. export interface FormProps extends SharedFormProps {
  168. /**
  169. * Indicate a specific fetcherKey to use when using navigate=false
  170. */
  171. fetcherKey?: string;
  172. /**
  173. * navigate=false will use a fetcher instead of a navigation
  174. */
  175. navigate?: boolean;
  176. /**
  177. * Forces a full document navigation instead of a fetch.
  178. */
  179. reloadDocument?: boolean;
  180. /**
  181. * Replaces the current entry in the browser history stack when the form
  182. * navigates. Use this if you don't want the user to be able to click "back"
  183. * to the page with the form on it.
  184. */
  185. replace?: boolean;
  186. /**
  187. * State object to add to the history stack entry for this navigation
  188. */
  189. state?: any;
  190. /**
  191. * Enable view transitions on this Form navigation
  192. */
  193. viewTransition?: boolean;
  194. }
  195. /**
  196. * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
  197. * that the interaction with the server is with `fetch` instead of new document
  198. * requests, allowing components to add nicer UX to the page as the form is
  199. * submitted and returns with data.
  200. */
  201. export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
  202. export interface ScrollRestorationProps {
  203. getKey?: GetScrollRestorationKeyFunction;
  204. storageKey?: string;
  205. }
  206. /**
  207. * This component will emulate the browser's scroll restoration on location
  208. * changes.
  209. */
  210. export declare function ScrollRestoration({ getKey, storageKey, }: ScrollRestorationProps): null;
  211. export declare namespace ScrollRestoration {
  212. var displayName: string;
  213. }
  214. /**
  215. * Handles the click behavior for router `<Link>` components. This is useful if
  216. * you need to create custom `<Link>` components with the same click behavior we
  217. * use in our exported `<Link>`.
  218. */
  219. export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, viewTransition, }?: {
  220. target?: React.HTMLAttributeAnchorTarget;
  221. replace?: boolean;
  222. state?: any;
  223. preventScrollReset?: boolean;
  224. relative?: RelativeRoutingType;
  225. viewTransition?: boolean;
  226. }): (event: React.MouseEvent<E, MouseEvent>) => void;
  227. /**
  228. * A convenient wrapper for reading and writing search parameters via the
  229. * URLSearchParams interface.
  230. */
  231. export declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
  232. export type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
  233. /**
  234. * Submits a HTML `<form>` to the server without reloading the page.
  235. */
  236. export interface SubmitFunction {
  237. (
  238. /**
  239. * Specifies the `<form>` to be submitted to the server, a specific
  240. * `<button>` or `<input type="submit">` to use to submit the form, or some
  241. * arbitrary data to submit.
  242. *
  243. * Note: When using a `<button>` its `name` and `value` will also be
  244. * included in the form data that is submitted.
  245. */
  246. target: SubmitTarget,
  247. /**
  248. * Options that override the `<form>`'s own attributes. Required when
  249. * submitting arbitrary data without a backing `<form>`.
  250. */
  251. options?: SubmitOptions): void;
  252. }
  253. /**
  254. * Submits a fetcher `<form>` to the server without reloading the page.
  255. */
  256. export interface FetcherSubmitFunction {
  257. (target: SubmitTarget, options?: FetcherSubmitOptions): void;
  258. }
  259. /**
  260. * Returns a function that may be used to programmatically submit a form (or
  261. * some arbitrary data) to the server.
  262. */
  263. export declare function useSubmit(): SubmitFunction;
  264. export declare function useFormAction(action?: string, { relative }?: {
  265. relative?: RelativeRoutingType;
  266. }): string;
  267. export type FetcherWithComponents<TData> = Fetcher<TData> & {
  268. Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
  269. submit: FetcherSubmitFunction;
  270. load: (href: string, opts?: {
  271. flushSync?: boolean;
  272. }) => void;
  273. };
  274. /**
  275. * Interacts with route loaders and actions without causing a navigation. Great
  276. * for any interaction that stays on the same page.
  277. */
  278. export declare function useFetcher<TData = any>({ key, }?: {
  279. key?: string;
  280. }): FetcherWithComponents<TData>;
  281. /**
  282. * Provides all fetchers currently on the page. Useful for layouts and parent
  283. * routes that need to provide pending/optimistic UI regarding the fetch.
  284. */
  285. export declare function useFetchers(): (Fetcher & {
  286. key: string;
  287. })[];
  288. /**
  289. * When rendered inside a RouterProvider, will restore scroll positions on navigations
  290. */
  291. declare function useScrollRestoration({ getKey, storageKey, }?: {
  292. getKey?: GetScrollRestorationKeyFunction;
  293. storageKey?: string;
  294. }): void;
  295. export { useScrollRestoration as UNSAFE_useScrollRestoration };
  296. /**
  297. * Setup a callback to be fired on the window's `beforeunload` event. This is
  298. * useful for saving some data to `window.localStorage` just before the page
  299. * refreshes.
  300. *
  301. * Note: The `callback` argument should be a function created with
  302. * `React.useCallback()`.
  303. */
  304. export declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
  305. capture?: boolean;
  306. }): void;
  307. /**
  308. * Wrapper around useBlocker to show a window.confirm prompt to users instead
  309. * of building a custom UI with useBlocker.
  310. *
  311. * Warning: This has *a lot of rough edges* and behaves very differently (and
  312. * very incorrectly in some cases) across browsers if user click addition
  313. * back/forward navigations while the confirm is open. Use at your own risk.
  314. */
  315. declare function usePrompt({ when, message, }: {
  316. when: boolean | BlockerFunction;
  317. message: string;
  318. }): void;
  319. export { usePrompt as unstable_usePrompt };
  320. /**
  321. * Return a boolean indicating if there is an active view transition to the
  322. * given href. You can use this value to render CSS classes or viewTransitionName
  323. * styles onto your elements
  324. *
  325. * @param href The destination href
  326. * @param [opts.relative] Relative routing type ("route" | "path")
  327. */
  328. declare function useViewTransitionState(to: To, opts?: {
  329. relative?: RelativeRoutingType;
  330. }): boolean;
  331. export { useViewTransitionState as useViewTransitionState };