Norvell's Public Machinations

    @beeanco/svelte-form
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.1 • Public • Published

    @beeanco/svelte-form

    Easy forms in svelte

    Installation

    With node.js installed, use npm to install this package and its peer dependencies:

    npm install @beeanco/svelte-form yup

    Usage

    Basically you only need to use the createForm function to create a form using a yup schema and an action in your svelte component, and use it with the <Form /> component:

    <script>
      import { createForm, Form } from '@beeanco/svelte-form';
      import { object, string } from 'yup';
    
      // Create a yup schema for your form
      const schema = object().shape({
        username: string().required(),
        password: string().required(),
      });
    
      // The action to run
      async function action(values) {
        console.info(values);
      }
    
      // Create the form object
      const form = createForm({ schema, action });
    </script>
    
    <Form {form}>
      <!-- Your inputs... -->
    </Form>

    The easiest way to add inputs and buttons to this form is to use @beeanco/svelte-bulma, which contains svelte components for the bulma CSS framework. Don't forget to npm install @beeanco/svelte-bulma!

    <!-- LoginForm.svelte -->
    <script>
      import { createForm, Form, FieldContext } from '@beeanco/svelte-form';
      import { FormField, ErrorMessage, SubmitField } from '@beeanco/svelte-bulma';
      import { object, string } from 'yup';
    
      // Create a yup schema for your form
      // (https://www.npmjs.com/package/yup)
      const schema = object().shape({
        username: string().label('Username').required(),
        password: string().label('Password').required(),
      });
    
      // The function to call with the resulting object
      async function action(values) {
        console.info('A user wants to log in with these credentials:', values);
    
        // You can call your API here...
        await new Promise((resolve) => setTimeout(resolve, 200));
    
        // ...and errors thrown here are reported.
        if (Math.random() > 0.5) {
          throw new Error('nope...');
        }
      }
    
      // Create the form object
      const form = createForm({ schema, action });
    
      // Get the field stores
      const { value: nameValue, error: nameError } = form.fields.get('username');
      const { value: passwordValue, error: passwordError } = form.fields.get('password');
    </script>
    
    <h1>Login to continue</h1>
    
    <Form {form}>
      <FormField name="username" placeholder="Your Username" />
      <FormField name="password" placeholder="Your Password" />
    
      <ErrorMessage />
    
      <SubmitField label="Submit" />
    </Form>

    Of course you can use this package with other CSS frameworks as well. Just use the stores returned by the createForm function.

    Complete example without bulma:

    <!-- LoginForm.svelte -->
    <script>
      import { createForm, Form } from '@beeanco/svelte-form';
      import { object, string } from 'yup';
    
      // Create a yup schema for your form
      // (https://www.npmjs.com/package/yup)
      const schema = object().shape({
        username: string().required(),
        password: string().required(),
      });
    
      // The function to call with the resulting object
      async function action(values) {
        console.info('A user wants to log in with these credentials:', values);
    
        // You can call your API here...
        await new Promise((resolve) => setTimeout(resolve, 200));
    
        // ...and errors thrown here are reported.
        if (Math.random() > 0.5) {
          throw new Error('nope...');
        }
      }
    
      // Create the form object
      const form = createForm({ schema, action });
    
      // Get the field stores
      const { value: nameValue, error: nameError } = form.fields.get('username');
      const { value: passwordValue, error: passwordError } = form.fields.get('password');
    </script>
    
    <h1>Login to continue</h1>
    
    <!-- The <Form /> component sets up the svelte contexts -->
    <Form {form} let:error let:submitting>
      <!-- let:values is also available -->
    
      <label>
        Username
        <input type="text" bind:value={$nameValue} />
    
        {#if $nameError}
          <strong>{$nameError.message}</strong>
        {/if}
      </label>
    
      <label>
        Password
        <input type="password" bind:value={$passwordValue} />
    
        {#if $passwordError}
          <strong>{$passwordError.message}</strong>
        {/if}
      </label>
    
      <label>
        {#if error}
          <strong>Oops! {error.message}</strong>
        {/if}
    
        {#if submitting}
          <i>Submitting...</i>
        {:else}
          <button type="submit">log in</button>
        {/if}
      </label>
    </Form>
    
    <style>
      /* Minimal styling */
      label {
        display: block;
      }
    </style>

    Install

    npm i @beeanco/svelte-form

    DownloadsWeekly Downloads

    12

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    69.4 kB

    Total Files

    22

    Last publish

    Collaborators

    • lhechenberger