Gathering detailed insights and metrics for formsnap
Gathering detailed insights and metrics for formsnap
npm install formsnap
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
1,103,367
Last Day
6,851
Last Week
37,253
Last Month
159,526
Last Year
1,008,631
Latest Version
2.0.0
Package Id
formsnap@2.0.0
Unpacked Size
60.91 kB
Size
12.75 kB
File Count
43
NPM Version
10.8.2
Node Version
20.18.1
Published on
Dec 13, 2024
Cumulative downloads
Total Downloads
Last Day
18.7%
6,851
Compared to previous day
Last Week
1.2%
37,253
Compared to previous week
Last Month
19.5%
159,526
Compared to previous month
Last Year
964.7%
1,008,631
Compared to previous year
1
2
The goal of this library is to make working with the already incredible sveltekit-superforms even more pleasant, by wrapping it with accessible form components.
1npm i formsnap sveltekit-superforms <your-schema-library>
You'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function.
1// schemas.ts 2import { z } from "zod"; 3export const settingsFormSchema = z.object({ 4 email: z.string().email(), 5 bio: z.string().max(250).optional(), 6 marketingEmails: z.boolean().default(true), 7 language: z.enum(["en", "es", "fr"]).default(["en"]), 8 theme: z.enum(["light", "dark"]).default(["light"]), 9});
1// +page.server.ts 2import { superValidate } from "sveltekit-superforms"; 3import { zod } from "sveltekit-superforms/adapters"; 4import type { PageServerLoad } from "./$types"; 5import { settingsFormSchema } from "./schemas"; 6 7export const load: PageServerLoad = async () => { 8 return { 9 form: await superValidate(zod(settingsFormSchema)), 10 }; 11};
1<script lang="ts"> 2 import { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from "formsnap"; 3 import { settingsFormSchema } from "./schemas"; 4 import { superForm } from "sveltekit-superforms"; 5 import { zodClient } from "sveltekit-superforms/adapters"; 6 7 export let data; 8 9 const form = superForm(data.form, { 10 validators: zodClient(settingsFormSchema), 11 }); 12 13 const { form: formData, enhance } = form; 14</script> 15 16<form method="POST" use:enhance> 17 <Field {form} name="email"> 18 <Control let:attrs> 19 <Label>Email</Label> 20 <input type="email" {...attrs} bind:value={$formData.email} /> 21 </Control> 22 <Description>We'll provide critical updates about your account via email.</Description> 23 <FieldErrors /> 24 </Field> 25 26 <Field {form} name="bio"> 27 <Control let:attrs> 28 <Label>Bio</Label> 29 <textarea bind:value={$formData.bio} {...attrs} /> 30 </Control> 31 <FieldErrors /> 32 </Field> 33 34 <Field {form} name="language"> 35 <Control let:attrs> 36 <Label>Language</Label> 37 <select {...attrs} bind:value={$formData.language}> 38 <option value="en">English</option> 39 <option value="es">Spanish</option> 40 <option value="fr">French</option> 41 </select> 42 </Control> 43 <FieldErrors /> 44 </Field> 45 46 <Field {form} name="marketingEmails"> 47 <Control let:attrs> 48 <Label>Receive marketing emails from us</Label> 49 <input type="checkbox" {...attrs} bind:checked={$formData.marketingEmails} /> 50 </Control> 51 <FieldErrors /> 52 </Field> 53 54 <Fieldset {form} name="theme"> 55 <Legend>Select your theme</Legend> 56 {#each ["light", "dark"] as theme} 57 <Control let:attrs> 58 <input {...attrs} type="radio" bind:group={$formData.theme} value={theme} /> 59 <Label>{theme}</Label> 60 </Control> 61 {/each} 62 <FieldErrors /> 63 </Fieldset> 64 65 <button type="submit">Submit</button> 66</form>
Check out Formsnap.dev for more documentation.
No vulnerabilities found.
No security vulnerabilities found.