https://github.com/whizzes/svelte-forms
Form utilities for Svelte
https://github.com/whizzes/svelte-forms
forms library svelte utility
Last synced: 7 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 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-14T08:51:03.000Z (about 1 year ago)
- Last Synced: 2025-03-20T17:21:21.098Z (8 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: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Svelte Forms
Utilities for Svelte Forms Management
[](https://discord.gg/yde6mcgs2C)
[](https://www.npmjs.com/package/@whizzes/svelte-forms)
[](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: 'james.bond@agent007.com',
},
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!