hooks.d.ts 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import * as React from "react";
  2. import type { Blocker, BlockerFunction, Location, ParamParseKey, Params, Path, PathMatch, PathPattern, RelativeRoutingType, Router as RemixRouter, RevalidationState, To, UIMatch } from "@remix-run/router";
  3. import { Action as NavigationType } from "@remix-run/router";
  4. import type { NavigateOptions, RouteContextObject, RouteMatch, RouteObject } from "./context";
  5. /**
  6. * Returns the full href for the given "to" value. This is useful for building
  7. * custom links that are also accessible and preserve right-click behavior.
  8. *
  9. * @see https://reactrouter.com/v6/hooks/use-href
  10. */
  11. export declare function useHref(to: To, { relative }?: {
  12. relative?: RelativeRoutingType;
  13. }): string;
  14. /**
  15. * Returns true if this component is a descendant of a `<Router>`.
  16. *
  17. * @see https://reactrouter.com/v6/hooks/use-in-router-context
  18. */
  19. export declare function useInRouterContext(): boolean;
  20. /**
  21. * Returns the current location object, which represents the current URL in web
  22. * browsers.
  23. *
  24. * Note: If you're using this it may mean you're doing some of your own
  25. * "routing" in your app, and we'd like to know what your use case is. We may
  26. * be able to provide something higher-level to better suit your needs.
  27. *
  28. * @see https://reactrouter.com/v6/hooks/use-location
  29. */
  30. export declare function useLocation(): Location;
  31. /**
  32. * Returns the current navigation action which describes how the router came to
  33. * the current location, either by a pop, push, or replace on the history stack.
  34. *
  35. * @see https://reactrouter.com/v6/hooks/use-navigation-type
  36. */
  37. export declare function useNavigationType(): NavigationType;
  38. /**
  39. * Returns a PathMatch object if the given pattern matches the current URL.
  40. * This is useful for components that need to know "active" state, e.g.
  41. * `<NavLink>`.
  42. *
  43. * @see https://reactrouter.com/v6/hooks/use-match
  44. */
  45. export declare function useMatch<ParamKey extends ParamParseKey<Path>, Path extends string>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null;
  46. /**
  47. * The interface for the navigate() function returned from useNavigate().
  48. */
  49. export interface NavigateFunction {
  50. (to: To, options?: NavigateOptions): void;
  51. (delta: number): void;
  52. }
  53. /**
  54. * Returns an imperative method for changing the location. Used by `<Link>`s, but
  55. * may also be used by other elements to change the location.
  56. *
  57. * @see https://reactrouter.com/v6/hooks/use-navigate
  58. */
  59. export declare function useNavigate(): NavigateFunction;
  60. /**
  61. * Returns the context (if provided) for the child route at this level of the route
  62. * hierarchy.
  63. * @see https://reactrouter.com/v6/hooks/use-outlet-context
  64. */
  65. export declare function useOutletContext<Context = unknown>(): Context;
  66. /**
  67. * Returns the element for the child route at this level of the route
  68. * hierarchy. Used internally by `<Outlet>` to render child routes.
  69. *
  70. * @see https://reactrouter.com/v6/hooks/use-outlet
  71. */
  72. export declare function useOutlet(context?: unknown): React.ReactElement | null;
  73. /**
  74. * Returns an object of key/value pairs of the dynamic params from the current
  75. * URL that were matched by the route path.
  76. *
  77. * @see https://reactrouter.com/v6/hooks/use-params
  78. */
  79. export declare function useParams<ParamsOrKey extends string | Record<string, string | undefined> = string>(): Readonly<[
  80. ParamsOrKey
  81. ] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>>;
  82. /**
  83. * Resolves the pathname of the given `to` value against the current location.
  84. *
  85. * @see https://reactrouter.com/v6/hooks/use-resolved-path
  86. */
  87. export declare function useResolvedPath(to: To, { relative }?: {
  88. relative?: RelativeRoutingType;
  89. }): Path;
  90. /**
  91. * Returns the element of the route that matched the current location, prepared
  92. * with the correct context to render the remainder of the route tree. Route
  93. * elements in the tree must render an `<Outlet>` to render their child route's
  94. * element.
  95. *
  96. * @see https://reactrouter.com/v6/hooks/use-routes
  97. */
  98. export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
  99. export declare function useRoutesImpl(routes: RouteObject[], locationArg?: Partial<Location> | string, dataRouterState?: RemixRouter["state"], future?: RemixRouter["future"]): React.ReactElement | null;
  100. type RenderErrorBoundaryProps = React.PropsWithChildren<{
  101. location: Location;
  102. revalidation: RevalidationState;
  103. error: any;
  104. component: React.ReactNode;
  105. routeContext: RouteContextObject;
  106. }>;
  107. type RenderErrorBoundaryState = {
  108. location: Location;
  109. revalidation: RevalidationState;
  110. error: any;
  111. };
  112. export declare class RenderErrorBoundary extends React.Component<RenderErrorBoundaryProps, RenderErrorBoundaryState> {
  113. constructor(props: RenderErrorBoundaryProps);
  114. static getDerivedStateFromError(error: any): {
  115. error: any;
  116. };
  117. static getDerivedStateFromProps(props: RenderErrorBoundaryProps, state: RenderErrorBoundaryState): {
  118. error: any;
  119. location: Location<any>;
  120. revalidation: RevalidationState;
  121. };
  122. componentDidCatch(error: any, errorInfo: any): void;
  123. render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
  124. }
  125. export declare function _renderMatches(matches: RouteMatch[] | null, parentMatches?: RouteMatch[], dataRouterState?: RemixRouter["state"] | null, future?: RemixRouter["future"] | null): React.ReactElement | null;
  126. /**
  127. * Returns the ID for the nearest contextual route
  128. */
  129. export declare function useRouteId(): string;
  130. /**
  131. * Returns the current navigation, defaulting to an "idle" navigation when
  132. * no navigation is in progress
  133. */
  134. export declare function useNavigation(): import("@remix-run/router").Navigation;
  135. /**
  136. * Returns a revalidate function for manually triggering revalidation, as well
  137. * as the current state of any manual revalidations
  138. */
  139. export declare function useRevalidator(): {
  140. revalidate: () => void;
  141. state: RevalidationState;
  142. };
  143. /**
  144. * Returns the active route matches, useful for accessing loaderData for
  145. * parent/child routes or the route "handle" property
  146. */
  147. export declare function useMatches(): UIMatch[];
  148. /**
  149. * Returns the loader data for the nearest ancestor Route loader
  150. */
  151. export declare function useLoaderData(): unknown;
  152. /**
  153. * Returns the loaderData for the given routeId
  154. */
  155. export declare function useRouteLoaderData(routeId: string): unknown;
  156. /**
  157. * Returns the action data for the nearest ancestor Route action
  158. */
  159. export declare function useActionData(): unknown;
  160. /**
  161. * Returns the nearest ancestor Route error, which could be a loader/action
  162. * error or a render error. This is intended to be called from your
  163. * ErrorBoundary/errorElement to display a proper error message.
  164. */
  165. export declare function useRouteError(): unknown;
  166. /**
  167. * Returns the happy-path data from the nearest ancestor `<Await />` value
  168. */
  169. export declare function useAsyncValue(): unknown;
  170. /**
  171. * Returns the error from the nearest ancestor `<Await />` value
  172. */
  173. export declare function useAsyncError(): unknown;
  174. /**
  175. * Allow the application to block navigations within the SPA and present the
  176. * user a confirmation dialog to confirm the navigation. Mostly used to avoid
  177. * using half-filled form data. This does not handle hard-reloads or
  178. * cross-origin navigations.
  179. */
  180. export declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;
  181. export {};