mirror of
https://github.com/withastro/astro.git
synced 2025-01-27 22:19:04 -05:00
fda3a0213b
* Support form submissions in the ViewTransitions router * Align with navigate API, add `formData` option * Change API to handleForms * Add a changeset * Add a test for non-200 responses * Update .changeset/many-weeks-sort.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/many-weeks-sort.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Add a little more on why this is exciting! * Update .changeset/many-weeks-sort.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Switch to e.g. --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
---
|
|
'astro': minor
|
|
---
|
|
|
|
Form support in View Transitions router
|
|
|
|
The `<ViewTransitions />` router can now handle form submissions, allowing the same animated transitions and stateful UI retention on form posts that are already available on `<a>` links. With this addition, your Astro project can have animations in all of these scenarios:
|
|
|
|
- Clicking links between pages.
|
|
- Making stateful changes in forms (e.g. updating site preferences).
|
|
- Manually triggering navigation via the `navigate()` API.
|
|
|
|
This feature is opt-in for semver reasons and can be enabled by adding the `handleForms` prop to the `<ViewTransitions /> component:
|
|
|
|
```astro
|
|
---
|
|
// src/layouts/MainLayout.astro
|
|
import { ViewTransitions } from 'astro:transitions';
|
|
---
|
|
|
|
<html>
|
|
<head>
|
|
<!-- ... -->
|
|
<ViewTransitions handleForms />
|
|
</head>
|
|
<body>
|
|
<!-- ... -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Just as with links, if you don't want the routing handling a form submission, you can opt out on a per-form basis with the `data-astro-reload` property:
|
|
|
|
```astro
|
|
---
|
|
// src/components/Contact.astro
|
|
---
|
|
<form class="contact-form" action="/request" method="post" data-astro-reload>
|
|
<!-- ...-->
|
|
</form>
|
|
```
|
|
|
|
Form support works on post `method="get"` and `method="post"` forms.
|