Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explain that props are updated on navigation #6915

Merged
merged 8 commits into from
Mar 8, 2024
13 changes: 11 additions & 2 deletions src/content/docs/en/guides/view-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,10 @@ For example, the following `<video>` will continue to play as you navigate to an

You can also place the directive on an [Astro island](/en/concepts/islands/) (a UI framework component with a [`client:` directive](/en/reference/directives-reference/#client-directives)). If that component exists on the next page, the island from the old page **with its current state** will continue to be displayed, instead of replacing it with the island from the new page.

In the example below, the `count` will not be reset when navigating back and forth across pages that contain the `<Counter />` component with the `transition:persist` attribute.
In the example below, the component's `count` internal state will not be reset when navigating back and forth across pages that contain the `<Counter />` component with the `transition:persist` attribute.
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

```astro title="components/Header.astro" "transition:persist"
<Counter client:load transition:persist count={5} />
<Counter client:load transition:persist initialCount={5} />
```

You can also [manually identify corresponding elements](#naming-a-transition) if the island/element is in a different component between the two pages.
Expand All @@ -134,6 +134,15 @@ As a convenient shorthand, `transition:persist` can alternatively take a transit
<video controls="" autoplay="" transition:persist="media-player">
```

#### `transition:persist-props`
<p><Since v="4.5.0" /></p>

This allows you to control whether or not an island's props should be persisted upon navigation.

By default, when you add `transition:persist` to an island, the state is retained upon navigation, but your component will re-render with new props. This is useful, for example, when a component receives page-specific props such as the current page's `title`.

You can override this behavior with `transition:persist-props`. Adding this directive will keep an island's existing props (not re-render with new values) in addition to maintaining its existing state.
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

### Built-in Animation Directives

Astro comes with a few built-in animations to override the default `fade` transition. Add the `transition:animate` directive to individual elements to customize the behavior of specific transitions.
Expand Down
Loading