https://github.com/pilcrowOnPaper/astro-form-actions

Forms in Astro made easy
https://github.com/pilcrowOnPaper/astro-form-actions

Last synced: 14 days ago
JSON representation

Forms in Astro made easy

• Host: GitHub
• URL: https://github.com/pilcrowOnPaper/astro-form-actions
• Owner: pilcrowOnPaper
• Archived: true
• Created: 2023-01-18T12:07:06.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-26T02:02:23.000Z (almost 2 years ago)
• Last Synced: 2024-07-31T22:39:30.291Z (3 months ago)
• Language: TypeScript
• Homepage: https://astro-form-actions.vercel.app
• Size: 575 KB
• Stars: 24
• Watchers: 2
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• my-awesome-astro - astro-form-actions - SSR, utility for handling form submissions within Astro (What Do I Use... / If I want to handle form submissions?)

README

        
# Astro form actions

Use progressive form enhancement and handle form submissions in Astro. This library only uses native Web APIs and can be used in any runtime.

```

npm i astro-form-actions

pnpm add astro-form-actions

yarn add astro-form-actions

```

**Documentation: https://github.com/pilcrowOnPaper/astro-form-actions/wiki**

**Demo: https://astro-form-actions.vercel.app**

> Need a library to parse your forms? Check out my other project [Adria](https://github.com/pilcrowOnPaper/adria)!

### Features

- Simple

- Type inference

- Supports multipart form data

- Framework agnostic

## Overview

This library is made up of 2 parts: server side and client side.

### Server side

`handleFormSubmission` will handle all POST requests to the page.

```ts

// inside .astro page

import {

	handleFormSubmission,

	reject,

	resolve,

	redirect

} from "astro-form-actions";

const { response, error, inputValues, body } = await handleFormSubmission(

	Astro,

	async (formData) => {

		const message = formData.get("message");

		if (typeof notes !== "string")

			return reject(400, {

				message: "bad input"

			});

		// do some stuff

		return resolve({

			success: true

		});

	}

);

if (response) return response;

```

### Client side

You can use a regular HTML form:

```html

	

	

```

Or, by using component frameworks like Solid (or just even vanilla JS), you can use `submitForm` to make the submission.

```tsx

import { submitForm } from "astro-form-actions/client";

export default () => {

	return (

		 {

				e.preventDefault();

				const { error } = await submitForm<

					{

						success: boolean;

					},

					{

						message: string;

					}

				>(e.currentTarget);

			}}

		>

			

			

		

	);

};

```

## Other

Parts of the library is from https://github.com/nachomazzara/parse-multipart-data.