index.d.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  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 { NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
  7. import type { Fetcher, FormEncType, FormMethod, GetScrollRestorationKeyFunction, History, HydrationState, Router as RemixRouter } from "@remix-run/router";
  8. import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
  9. import { createSearchParams } from "./dom";
  10. export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, };
  11. export { createSearchParams };
  12. export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
  13. export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
  14. /** @internal */
  15. export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, } from "react-router";
  16. declare global {
  17. var __staticRouterHydrationData: HydrationState | undefined;
  18. }
  19. export declare function createBrowserRouter(routes: RouteObject[], opts?: {
  20. basename?: string;
  21. hydrationData?: HydrationState;
  22. window?: Window;
  23. }): RemixRouter;
  24. export declare function createHashRouter(routes: RouteObject[], opts?: {
  25. basename?: string;
  26. hydrationData?: HydrationState;
  27. window?: Window;
  28. }): RemixRouter;
  29. export interface BrowserRouterProps {
  30. basename?: string;
  31. children?: React.ReactNode;
  32. window?: Window;
  33. }
  34. /**
  35. * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  36. */
  37. export declare function BrowserRouter({ basename, children, window, }: BrowserRouterProps): JSX.Element;
  38. export interface HashRouterProps {
  39. basename?: string;
  40. children?: React.ReactNode;
  41. window?: Window;
  42. }
  43. /**
  44. * A `<Router>` for use in web browsers. Stores the location in the hash
  45. * portion of the URL so it is not sent to the server.
  46. */
  47. export declare function HashRouter({ basename, children, window }: HashRouterProps): JSX.Element;
  48. export interface HistoryRouterProps {
  49. basename?: string;
  50. children?: React.ReactNode;
  51. history: History;
  52. }
  53. /**
  54. * A `<Router>` that accepts a pre-instantiated history object. It's important
  55. * to note that using your own history object is highly discouraged and may add
  56. * two versions of the history library to your bundles unless you use the same
  57. * version of the history library that React Router uses internally.
  58. */
  59. declare function HistoryRouter({ basename, children, history }: HistoryRouterProps): JSX.Element;
  60. declare namespace HistoryRouter {
  61. var displayName: string;
  62. }
  63. export { HistoryRouter as unstable_HistoryRouter };
  64. export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  65. reloadDocument?: boolean;
  66. replace?: boolean;
  67. state?: any;
  68. preventScrollReset?: boolean;
  69. relative?: RelativeRoutingType;
  70. to: To;
  71. }
  72. /**
  73. * The public API for rendering a history-aware <a>.
  74. */
  75. export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
  76. export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
  77. children?: React.ReactNode | ((props: {
  78. isActive: boolean;
  79. isPending: boolean;
  80. }) => React.ReactNode);
  81. caseSensitive?: boolean;
  82. className?: string | ((props: {
  83. isActive: boolean;
  84. isPending: boolean;
  85. }) => string | undefined);
  86. end?: boolean;
  87. style?: React.CSSProperties | ((props: {
  88. isActive: boolean;
  89. isPending: boolean;
  90. }) => React.CSSProperties | undefined);
  91. }
  92. /**
  93. * A <Link> wrapper that knows if it's "active" or not.
  94. */
  95. export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
  96. export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
  97. /**
  98. * The HTTP verb to use when the form is submit. Supports "get", "post",
  99. * "put", "delete", "patch".
  100. */
  101. method?: FormMethod;
  102. /**
  103. * Normal `<form action>` but supports React Router's relative paths.
  104. */
  105. action?: string;
  106. /**
  107. * Forces a full document navigation instead of a fetch.
  108. */
  109. reloadDocument?: boolean;
  110. /**
  111. * Replaces the current entry in the browser history stack when the form
  112. * navigates. Use this if you don't want the user to be able to click "back"
  113. * to the page with the form on it.
  114. */
  115. replace?: boolean;
  116. /**
  117. * Determines whether the form action is relative to the route hierarchy or
  118. * the pathname. Use this if you want to opt out of navigating the route
  119. * hierarchy and want to instead route based on /-delimited URL segments
  120. */
  121. relative?: RelativeRoutingType;
  122. /**
  123. * Prevent the scroll position from resetting to the top of the viewport on
  124. * completion of the navigation when using the <ScrollRestoration> component
  125. */
  126. preventScrollReset?: boolean;
  127. /**
  128. * A function to call when the form is submitted. If you call
  129. * `event.preventDefault()` then this form will not do anything.
  130. */
  131. onSubmit?: React.FormEventHandler<HTMLFormElement>;
  132. }
  133. /**
  134. * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
  135. * that the interaction with the server is with `fetch` instead of new document
  136. * requests, allowing components to add nicer UX to the page as the form is
  137. * submitted and returns with data.
  138. */
  139. export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
  140. export interface ScrollRestorationProps {
  141. getKey?: GetScrollRestorationKeyFunction;
  142. storageKey?: string;
  143. }
  144. /**
  145. * This component will emulate the browser's scroll restoration on location
  146. * changes.
  147. */
  148. export declare function ScrollRestoration({ getKey, storageKey, }: ScrollRestorationProps): null;
  149. export declare namespace ScrollRestoration {
  150. var displayName: string;
  151. }
  152. /**
  153. * Handles the click behavior for router `<Link>` components. This is useful if
  154. * you need to create custom `<Link>` components with the same click behavior we
  155. * use in our exported `<Link>`.
  156. */
  157. export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, }?: {
  158. target?: React.HTMLAttributeAnchorTarget;
  159. replace?: boolean;
  160. state?: any;
  161. preventScrollReset?: boolean;
  162. relative?: RelativeRoutingType;
  163. }): (event: React.MouseEvent<E, MouseEvent>) => void;
  164. /**
  165. * A convenient wrapper for reading and writing search parameters via the
  166. * URLSearchParams interface.
  167. */
  168. export declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
  169. declare type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
  170. declare type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
  171. [name: string]: string;
  172. } | null;
  173. /**
  174. * Submits a HTML `<form>` to the server without reloading the page.
  175. */
  176. export interface SubmitFunction {
  177. (
  178. /**
  179. * Specifies the `<form>` to be submitted to the server, a specific
  180. * `<button>` or `<input type="submit">` to use to submit the form, or some
  181. * arbitrary data to submit.
  182. *
  183. * Note: When using a `<button>` its `name` and `value` will also be
  184. * included in the form data that is submitted.
  185. */
  186. target: SubmitTarget,
  187. /**
  188. * Options that override the `<form>`'s own attributes. Required when
  189. * submitting arbitrary data without a backing `<form>`.
  190. */
  191. options?: SubmitOptions): void;
  192. }
  193. /**
  194. * Returns a function that may be used to programmatically submit a form (or
  195. * some arbitrary data) to the server.
  196. */
  197. export declare function useSubmit(): SubmitFunction;
  198. export declare function useFormAction(action?: string, { relative }?: {
  199. relative?: RelativeRoutingType;
  200. }): string;
  201. declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
  202. export declare type FetcherWithComponents<TData> = Fetcher<TData> & {
  203. Form: ReturnType<typeof createFetcherForm>;
  204. submit: (target: SubmitTarget, options?: Omit<SubmitOptions, "replace" | "preventScrollReset">) => void;
  205. load: (href: string) => void;
  206. };
  207. /**
  208. * Interacts with route loaders and actions without causing a navigation. Great
  209. * for any interaction that stays on the same page.
  210. */
  211. export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
  212. /**
  213. * Provides all fetchers currently on the page. Useful for layouts and parent
  214. * routes that need to provide pending/optimistic UI regarding the fetch.
  215. */
  216. export declare function useFetchers(): Fetcher[];
  217. /**
  218. * When rendered inside a RouterProvider, will restore scroll positions on navigations
  219. */
  220. declare function useScrollRestoration({ getKey, storageKey, }?: {
  221. getKey?: GetScrollRestorationKeyFunction;
  222. storageKey?: string;
  223. }): void;
  224. /**
  225. * Setup a callback to be fired on the window's `beforeunload` event. This is
  226. * useful for saving some data to `window.localStorage` just before the page
  227. * refreshes.
  228. *
  229. * Note: The `callback` argument should be a function created with
  230. * `React.useCallback()`.
  231. */
  232. export declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) => any, options?: {
  233. capture?: boolean;
  234. }): void;
  235. /**
  236. * Wrapper around useBlocker to show a window.confirm prompt to users instead
  237. * of building a custom UI with useBlocker.
  238. *
  239. * Warning: This has *a lot of rough edges* and behaves very differently (and
  240. * very incorrectly in some cases) across browsers if user click addition
  241. * back/forward navigations while the confirm is open. Use at your own risk.
  242. */
  243. declare function usePrompt({ when, message }: {
  244. when: boolean;
  245. message: string;
  246. }): void;
  247. export { usePrompt as unstable_usePrompt };
  248. export { useScrollRestoration as UNSAFE_useScrollRestoration };