https://github.com/whizzes/svelte-forms

Form utilities for Svelte
https://github.com/whizzes/svelte-forms

forms library svelte utility

Last synced: about 2 months ago
JSON representation

Form utilities for Svelte

• Host: GitHub
• URL: https://github.com/whizzes/svelte-forms
• Owner: whizzes
• License: mit
• Created: 2023-01-10T22:16:25.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-16T08:46:50.000Z (3 months ago)
• Last Synced: 2024-09-19T02:58:44.905Z (3 months ago)
• Topics: forms, library, svelte, utility
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@whizzes/svelte-forms
• Size: 995 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
Svelte Forms

  


    Utilities for Svelte Forms Management

  





[![Discord](https://img.shields.io/discord/1011702194925490186?color=blue&label=discord&logo=discord)](https://discord.gg/yde6mcgs2C)

![Build](https://github.com/whizzes/svelte-forms/workflows/build/badge.svg)

![Tests](https://github.com/whizzes/svelte-forms/workflows/test/badge.svg)

![Lint](https://github.com/whizzes/svelte-forms/workflows/lint/badge.svg)

![Publish](https://github.com/whizzes/svelte-forms/workflows/publish/badge.svg)

[![Version](https://img.shields.io/npm/v/@whizzes/svelte-forms.svg?style=flat)](https://www.npmjs.com/package/@whizzes/svelte-forms)

[![Downloads](https://img.shields.io/npm/dm/@whizzes/svelte-forms.svg?style=flat)](https://www.npmjs.com/package/@whizzes/svelte-forms)



## Installation

```bash

# npm

npm install @whizzes/svelte-forms

# yarn

yarn add @whizzes/svelte-forms

# pnpm

pnpm add @whizzes/svelte-forms

```

## Examples

### Creating a new form

```svelte

  import * as Sentry from '@sentry/browser';

  import { newForm } from '@whizzes/svelte-forms';

  import * as Yup from 'yup';

  import { EmailAlreadyTaken } from '$lib/errors';

  import { agentService } from '$lib/services/agent';

  import { notificationStore } from '$lib/stores/notification';

  const { handleSubmit, values, errors, isSubmitting } = newForm({

    initialValues: {

      name: 'James'

      lastName: 'Bond',

      nickname: 'Agent 007',

      email: '[email protected]',

    },

    validationSchema: Yup.object({

      name: Yup.string().required(),

      lastName: Yup.string().required(),

      nickname: Yup.string().required(),

      email: Yup.string().email().required(),

    }),

    onSubmit: async (values, helpers) => {

      try {

        await agentService.register(values);

      } catch (error) {

        if (error instanceof EmailAlreadyTaken) {

          helpers.setFieldError(

            'email',

            'The email is already taken!');

          return;

        }

        Sentry.captureException(error);

        notificationStore.displayError({

          text: 'An error ocurred registering an agent.'

        });

      }

    },

  });

  


    Name

    

    


  

  


    Last Name

    

    


  

  


    Nickname

    

    


  

  


    Email

    

    


  

  

    Create Account

  


```

## Releasing

Whenever a tag is pushed a new release is created an the package is

published to the NPM registry using GitHub Actions.

Bump the current version using `npm` as follows:

```sh

# for versions with breaking changes use `major`

npm version major

# for versions with non-breaking changes use `minor`

npm version minor

# for patch versions use `patch`

npm version patch

```

Then push the repository including tag metadata as follows

```sh

git push origin main --follow-tags

```

## Contributions

Any contribution to this package is welcome! Don't hesitate on opening a

PR or creating an issue!