just-submit

v0.0.8

Published

3 months ago

Submit simple form, with safe types, without management!

Downloads

0High
0Medium
0Low

jsun969

form submit react vanilla

🛫 Just Submit

Submit simple form, with safe types, without management!

✨ Features

🔒 TYPE SAFE
⚡ Speedy DX
👶 Beginner-Friendly
🧪 Well-Tested
🍃 Ultra Light
🧩 Framework-Agnostic

📦 Install

pnpm add just-submit

🎯 Quickstart

[!IMPORTANT]
Don't forget to add a default value for optional fields.

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

import { createSubmit } from 'just-submit';

const Form = () => {
  const handleSubmit = createSubmit({
    fullName: 'string',
    age: 'number',
    birthday: 'date',
    wantGift: 'boolean',
  });
  return (
    <form
      onSubmit={handleSubmit((data) => {
        // ...
      })}
    >
      <input type="text" name="fullName" required />
      <input type="number" name="age" min={0} required />
      <input type="date" name="birthday" defaultValue="2005-03-12" />
      <input type="checkbox" name="wantGift" />
      <button type="submit">SUBMIT</button>
    </form>
  );
};

Vue

<script setup lang="ts">
import { createSubmit } from 'just-submit';

const handleSubmit = createSubmit({
  fullName: 'string',
  age: 'number',
  birthday: 'date',
  wantGift: 'boolean',
})((data) => {
  // ...
});
</script>

<template>
  <form @submit="handleSubmit">
    <input type="text" name="fullName" required />
    <input type="number" name="age" min="0" required />
    <input type="date" name="birthday" value="2005-03-12" />
    <input type="checkbox" name="wantGift" />
    <button type="submit">SUBMIT</button>
  </form>
</template>

Vanilla

<form>
  <input type="text" name="fullName" required />
  <input type="number" name="age" min="0" required />
  <input type="date" name="birthday" value="2005-03-12" />
  <input type="checkbox" name="wantGift" />
  <button type="submit">SUBMIT</button>
</form>

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

<head>
  <script src="https://unpkg.com/just-submit"></script>
</head>
<body>
  <form>
    <input type="text" name="fullName" required />
    <input type="number" name="age" min="0" required />
    <input type="date" name="birthday" value="2005-03-12" />
    <input type="checkbox" name="wantGift" />
    <button type="submit">SUBMIT</button>
  </form>
  <script>
    const { createSubmit } = JustSubmit;
    const handleSubmit = createSubmit({
      fullName: 'string',
      age: 'number',
      birthday: 'date',
      wantGift: 'boolean',
    });
    const form = document.querySelector('form');
    form.addEventListener(
      'submit',
      handleSubmit((data) => {
        // ...
      }),
    );
  </script>
</body>

🔍 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 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 (React)
vorm (Vue)