Bring 6.27.0 docs updates into main

remix-run · Oct 22, 2024 · 38a0c29 · 38a0c29
1 parent 230181d
commit 38a0c29
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 96 deletions.
diff --git a/docs/components/form.md b/docs/components/form.md
@@ -27,7 +27,7 @@ interface FormProps
   reloadDocument?: boolean;
   replace?: boolean;
   state?: any;
-  unstable_viewTransition?: boolean;
+  viewTransition?: boolean;
 }
 ```
 
@@ -281,11 +281,9 @@ If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you preve
 
 See also: [`<Link preventScrollReset>`][link-preventscrollreset]
 
-## `unstable_viewTransition`
+## `viewTransition`
 
-The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state].
-
-<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
+The `viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`useViewTransitionState()`][use-view-transition-state].
 
 # Examples
 

diff --git a/docs/components/link.md b/docs/components/link.md
@@ -23,7 +23,7 @@ interface LinkProps
   reloadDocument?: boolean;
   replace?: boolean;
   state?: any;
-  unstable_viewTransition?: boolean;
+  viewTransition?: boolean;
 }
 
 type To = string | Partial<Path>;
@@ -171,24 +171,23 @@ let { state } = useLocation();
 
 The `reloadDocument` property can be used to skip client side routing and let the browser handle the transition normally (as if it were an `<a href>`).
 
-## `unstable_viewTransition`
+## `viewTransition`
 
-The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`:
+The `viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`:
 
 ```jsx
-<Link to={to} unstable_viewTransition>
+<Link to={to} viewTransition>
   Click me
 </Link>
 ```
 
-If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state] hook (or check out the `transitioning` class and `isTransitioning` render prop in [NavLink][navlink]):
+If you need to apply specific styles for this view transition, you will also need to leverage the [`useViewTransitionState()`][use-view-transition-state] hook (or check out the `transitioning` class and `isTransitioning` render prop in [NavLink][navlink]):
 
 ```jsx
 function ImageLink(to) {
-  const isTransitioning =
-    unstable_useViewTransitionState(to);
+  const isTransitioning = useViewTransitionState(to);
   return (
-    <Link to={to} unstable_viewTransition>
+    <Link to={to} viewTransition>
       <p
         style={{
           viewTransitionName: isTransitioning
@@ -212,9 +211,7 @@ function ImageLink(to) {
 }
 ```
 
-<docs-warning>`unstable_viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
-
-<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
+<docs-warning>`viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
 
 [link-native]: ./link-native
 [scrollrestoration]: ./scroll-restoration

diff --git a/docs/components/nav-link.md b/docs/components/nav-link.md
@@ -123,9 +123,9 @@ When a `NavLink` is active it will automatically apply `<a aria-current="page">`
 
 The `reloadDocument` property can be used to skip client side routing and let the browser handle the transition normally (as if it were an `<a href>`).
 
-## `unstable_viewTransition`
+## `viewTransition`
 
-The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. By default, during the transition a `transitioning` class will be added to the `<a>` element that you can use to customize the view transition.
+The `viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. By default, during the transition a `transitioning` class will be added to the `<a>` element that you can use to customize the view transition.
 
 ```css
 a.transitioning p {
@@ -138,7 +138,7 @@ a.transitioning img {
 ```
 
 ```jsx
-<NavLink to={to} unstable_viewTransition>
+<NavLink to={to} viewTransition>
   <p>Image Number {idx}</p>
   <img src={src} alt={`Img ${idx}`} />
 </NavLink>
@@ -147,7 +147,7 @@ a.transitioning img {
 You may also use the `className`/`style` props or the render props passed to `children` to further customize based on the `isTransitioning` value.
 
 ```jsx
-<NavLink to={to} unstable_viewTransition>
+<NavLink to={to} viewTransition>
   {({ isTransitioning }) => (
     <>
       <p
@@ -173,9 +173,5 @@ You may also use the `className`/`style` props or the render props passed to `ch
 </NavLink>
 ```
 
-<docs-warning>
-Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warning>
-
 [aria-current]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
 [view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
diff --git a/docs/hooks/use-fetcher.md b/docs/hooks/use-fetcher.md
@@ -133,11 +133,9 @@ If you find yourself calling this function inside of click handlers, you can pro
 
 <docs-info>Any `fetcher.load` calls that are active on the page will be re-executed as part of revalidation (either after a navigation submission, another fetcher submission, or a `useRevalidator()` call)</docs-info>
 
-#### `options.unstable_flushSync`
+#### `options.flushSync`
 
-The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this `fetcher.load` in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
-
-<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
+The `flushSync` option tells React Router DOM to wrap the initial state update for this `fetcher.load` in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
 
 ### `fetcher.submit()`
 

diff --git a/docs/hooks/use-navigate.md b/docs/hooks/use-navigate.md
@@ -20,8 +20,8 @@ interface NavigateOptions {
   state?: any;
   preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
-  unstable_flushSync?: boolean;
-  unstable_viewTransition?: boolean;
+  flushSync?: boolean;
+  viewTransition?: boolean;
 }
 
 type RelativeRoutingType = "route" | "path";
@@ -114,21 +114,17 @@ new URL("..", window.origin + location.pathname + "/");
 // 'https://remix.run/docs/en/main/start/'
 ```
 
-## `options.unstable_flushSync`
+## `options.flushSync`
 
-The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this navigation in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
+The `flushSync` option tells React Router DOM to wrap the initial state update for this navigation in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
 
-<docs-warning>`unstable_flushSync` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
+<docs-warning>`flushSync` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
 
-<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
+## `options.viewTransition`
 
-## `options.unstable_viewTransition`
+The `viewTransition` option enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`useViewTransitionState()`][use-view-transition-state].
 
-The `unstable_viewTransition` option enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state].
-
-<docs-warning>`unstable_viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
-
-<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
+<docs-warning>`viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
 
 [link]: ../components/link
 [redirect]: ../fetch/redirect

diff --git a/docs/hooks/use-submit.md b/docs/hooks/use-submit.md
@@ -160,13 +160,11 @@ Because submissions are navigations, the options may also contain the other navi
 - `relative`
 - `replace`
 - `state`
-- `unstable_viewTransition`
+- `viewTransition`
 
-### `options.unstable_flushSync`
+### `options.flushSync`
 
-The `unstable_flushSync` option tells React Router DOM to wrap the initial state update for this submission in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
-
-<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
+The `flushSync` option tells React Router DOM to wrap the initial state update for this submission in a [`ReactDOM.flushSync`][flush-sync] call instead of the default [`React.startTransition`][start-transition]. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.
 
 [pickingarouter]: ../routers/picking-a-router
 [form]: ../components/form

diff --git a/docs/hooks/use-view-transition-state.md b/docs/hooks/use-view-transition-state.md
@@ -1,14 +1,14 @@
 ---
-title: unstable_useViewTransitionState
+title: useViewTransitionState
 ---
 
-# `unstable_useViewTransitionState`
+# `useViewTransitionState`
 
 <details>
   <summary>Type declaration</summary>
 
 ```tsx
-declare function unstable_useViewTransitionState(
+declare function useViewTransitionState(
   to: To,
   opts: { relative?: "route" : "path" } = {}
 ): boolean;
@@ -24,17 +24,16 @@ interface Path {
 
 </details>
 
-This hook returns `true` when there is an active [View Transition][view-transitions] to the specified location. This can be used to apply finer-grained styles to elements to further customize the view transition. This requires that view transitions have been enabled for the given navigation via the [unstable_viewTransition][link-view-transition] prop on the `Link` (or the `Form`, `navigate`, or `submit` call).
+This hook returns `true` when there is an active [View Transition][view-transitions] to the specified location. This can be used to apply finer-grained styles to elements to further customize the view transition. This requires that view transitions have been enabled for the given navigation via the [viewTransition][link-view-transition] prop on the `Link` (or the `Form`, `navigate`, or `submit` call).
 
 Consider clicking on an image in a list that you need to expand into the hero image on the destination page:
 
 ```jsx
 function NavImage({ src, alt, id }) {
   const to = `/images/${id}`;
-  const isTransitioning =
-    unstable_useViewTransitionState(to);
+  const isTransitioning = useViewTransitionState(to);
   return (
-    <Link to={to} unstable_viewTransition>
+    <Link to={to} viewTransition>
       <img
         src={src}
         alt={alt}
@@ -49,5 +48,5 @@ function NavImage({ src, alt, id }) {
 }
 ```
 
-[link-view-transition]: ../components/link#unstable_viewtransition
+[link-view-transition]: ../components/link#viewtransition
 [view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API