Tiny helper to help with form submissions

Usage no npm install needed!

<script type="module">
  import rakeredForms from 'https://cdn.skypack.dev/@rakered/forms';



Tiny helper to help with form submissions

social image


The most basic helper is getFormData, it takes either the event directly, or an HTML form element. What it returns, is a dictionary holding the values of the form.

import { getFormData } from '@rakered/forms';

const onSubmit = (event) => {
  const data = getFormData(event);
  // » { name: 'smeijer', password: { digest: 'd03…83e', algorithm: 'sha-256' } }

<form onSubmit={onSubmit}>
  <input name="user" />
  <input name="password" type="password" />

Because we often want to wrap submit handlers between event.preventDefault() and return false, there is a handleSubmit helper that does exactly that.

import { handleSubmit } from '@rakered/forms';

const onSubmit = handleSubmit((values) => {
  // » { name: 'smeijer' }

<form onSubmit={onSubmit}>
  <input name="user" />

Path expansions

Where applicable, input names will be expanded to object structures

<form onSubmit={onSubmit}>
  <input name="user.name" value="Stephan Meijer" />
  <input name="user.age" type="number" value="34" />
  <input name="hobbies[]" value="chess" />
  <input name="hobbies[]" value="art" />

serializes to:

  user: {
    name: 'Stephan Meijer',
    age: 34,
  hobbies: ['chess', 'art'],

Type Coercion

A number of specific input types, are coerced to the proper data type.

  • password { digest: String, algorithm: 'sha-256' } This one is important, so let's start with that. Passwords are hashed using @rakered/hash, so you won't be reading the password that the user entered. Please don't try to work arround this. Instead, embrace it.

  • datetime-local Date The datetime-local input stores a full date, so the is converted to a proper Date. Other date-like fields, such as date, time, or week only support partial dates, and are left alone.

  • checkbox Boolean

  • number Number

  • range Number


Both methods are typed and accept a generic to make the values a typed object. Together with the typecoercion, this can simplify form handling a lot.

interface User {
  name: string;
  age: number;

const signup = handleSubmit<User>((values) => {
  // » { name: 'smeijer', age: 34 }

<form onSubmit={signup}>
  <input name="user" />
  <input name="age" type="number" />