0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
astro/.changeset/many-weeks-sort.md
Matthew Phillips fda3a0213b
Support form submissions in the ViewTransitions router (#8963)
* 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>
2023-11-08 12:45:50 -05:00

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.