mirror of
https://github.com/withastro/astro.git
synced 2025-01-20 22:12:38 -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>
1.2 KiB
1.2 KiB
| 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 ` component:
---
// 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:
---
// 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.