https://github.com/jsun969/just-submit
🛫 Submit simple form, with safe types, without management!
https://github.com/jsun969/just-submit
form react submit vanilla
Last synced: 11 months ago
JSON representation
🛫 Submit simple form, with safe types, without management!
- Host: GitHub
- URL: https://github.com/jsun969/just-submit
- Owner: jsun969
- License: mit
- Created: 2023-12-22T15:02:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T13:15:21.000Z (over 1 year ago)
- Last Synced: 2024-10-14T08:34:37.198Z (over 1 year ago)
- Topics: form, react, submit, vanilla
- Language: TypeScript
- Homepage: https://npm.im/just-submit
- Size: 123 KB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🛫 Just Submit
Submit simple form, with safe types, without management!
[](https://www.npmjs.com/package/just-submit)
[](https://github.com/jsun969/just-submit/blob/dev/LICENSE)
[](https://bundlephobia.com/result?p=just-submit)
[](https://www.npmjs.com/package/just-submit)
## ✨ Features
- 🔒 TYPE SAFE
- ⚡ Speedy DX
- 👶 Beginner-Friendly
- 🧪 Well-Tested
- 🍃 Ultra Light
- 🧩 Framework-Agnostic
## 📦 Install
```bash
pnpm add just-submit
```
## 🎯 Quickstart
> [!IMPORTANT]
> Don't forget to add a **default value** for **optional** fields.
```ts
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
// Inside form submit event handler
handleSubmit((data) => {
// ^ { fullName: string; age: number; birthday: Date; wantGift: boolean }
});
```
## 📚 Examples
### React
```tsx
import { createSubmit } from 'just-submit';
const Form = () => {
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
return (
{
// ...
})}
>
SUBMIT
);
};
```
### Vue
```vue
import { createSubmit } from 'just-submit';
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
})((data) => {
// ...
});
SUBMIT
```
### Vanilla
```html
SUBMIT
```
```ts
import { createSubmit } from 'just-submit';
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
const form = document.querySelector('form')!;
form.addEventListener(
'submit',
handleSubmit((data) => {
// ...
}),
);
```
### CDN
```html
SUBMIT
const { createSubmit } = JustSubmit;
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
const form = document.querySelector('form');
form.addEventListener(
'submit',
handleSubmit((data) => {
// ...
}),
);
```
## 🔍 Troubleshooting
### Form Field Converting Error
This library can only convert `string` values from `FormData`.
For **optional** fields, add a **default value** in case they are `null` in submission.
### How to control form? (watch value changes / form state / etc.)
This library is for simple forms that don't need to be controlled.
If you are working on a complex form, try [the libraries here](#-thanks) instead.
### Can I use it with ...(other framework) ?
You probably **CAN**! The `handleSubmit` function can be used in any submit event that has `preventDefault` and `currentTarget`.
The examples provided include only the frameworks that have passed our tests. If you find this library works with any other framework, please don't hesitate to **create a PR** for it. We greatly appreciate your contributions and support!
## 🙏 Thanks
Drawing inspiration and motivation from the following projects:
- [react-hook-form](https://github.com/react-hook-form/react-hook-form) (React)
- [vorm](https://github.com/Mini-ghost/vorms) (Vue)