DEV Community

Cover image for Announcing Felte 1.0: A form library for Svelte, Solid and React
Pablo Berganza
Pablo Berganza

Posted on • Originally published at pablo.berganza.dev

Announcing Felte 1.0: A form library for Svelte, Solid and React

After more than a year of work, I am proud to announce the release of version 1.0.0 of Felte!

Felte is an extensible form management library for Svelte, Solid and (as of today) React. The main characteristic of it is that it does not require any sort of Field or Form components to work. In its most basic form it only requires you to provide it your HTML form element so it can subscribe to your user’s interaction with your form.

I originally started working on Felte wanting a form library for Svelte that would not make it complex to style my input components. As I worked more on it, it began growing into a much more flexible package that allowed you to validate your form using your preferred validation library and display your validation messages as you preferred. After the release of version 1.0.0 of SolidJS, I released a version for it as well that shares most of its internals with the original Felte package. And now, more than a year after the first commit, version 1.0.0 has been released alongside a new version for React! This includes many improvements in the core API, new features and a more consistent API between all three versions.

Usage

All three versions of Felte have a very similar API, and a similar concept: you call a function to set up your form. Then you give Felte a reference to your HTML form element. The variations in its API come mostly from how each framework handles reactivity. For example, with Svelte, Felte returns stores that contain your data which you can access by prefixing the stores with $. With Solid and React it returns functions that will let you subscribe to all of your form’s data or specific values of it.

On its most basic form, you only need to use form, a property returned from Felte that will let it subscribe to all interactions that happen in your form.

Here’s a basic example of how each version looks like:

Svelte

The package for Svelte is available on npm as felte.

<script>
  import { createForm } from 'felte'

  const { form } = createForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  })
</script>

<!-- `form` is an action -->
<form use:form>
  <input type=text name=email>
  <input type=password name=password>
  <button type=submit>Sign In</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Solid

The package for Solid is available on npm as @felte/solid.

import { createForm } from '@felte/solid';

function Form() {
  const { form } = createForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  })

    // `form` is an action
  return (
    <form use:form>
      <input type="text" name="email" />
      <input type="password" name="password" />
      <button type="submit">Sign In</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

React

The package for React is available on npm as @felte/react.

import { useForm } from '@felte/react';

function Form() {
  const { form } = useForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  })

    // `form` is a ref
  return (
    <form ref={form}>
      <input type="text" name="email" />
      <input type="password" name="password" />
      <button type="submit">Sign In</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

New features

Version 1 comes with a lot of improvements and features:

  • Debounced validation is now supported. Previously we only supported asynchronous validation, but offered no way to debounce them. This meant using Felte’s validation for calls to an API would not be recommended unless you debounced it yourself, or did them only on submission.
  • Asynchronous and debounced validations might apply to only a few fields. Showing loaders for the field’s that are validating is a nice feature to have for your users. This is why Felte now offer’s a way to check if validations are currently running via the new isValidating store. And a way to check which is the last field your users interact with using the new interacted store.
  • Using custom form controls was not so straightforward. Requiring to use helper functions to update your stores. Felte now exports a new function: createField (useField for React) to be used with custom fields where you can’t directly provide a name, or with fields that don’t use native HTML controls at all (such as a contenteditable elements). It helps you make your custom fields “discoverable” to Felte.
  • Better support for field arrays with new helper functions to handle them: addField, unsetField, moveField and swapFields.
  • You no longer always need to have an onSubmit handler. If no onSubmit is declared, Felte will submit your values as either application/x-www-form-urlencoded or multipart/form-data using the action, method and enctype attributes of your <form> element.

Breaking changes

This being a major version release, there are some breaking changes. If you were previously using Felte v0.x, you can check the migration guide for Svelte, or the migration guide for Solid.

Read more

I’ve gone back to update my original introductory posts about Felte, as well as added a new one about React to the series. You can check them out here:

Final words

I’ve put a lot of work on this project, and I’m really grateful to the contributors that helped Felte grow as much as it did! I hope that this release can be useful to all of you!

Discussion (3)

Collapse
roblevintennis profile image
Rob Levin

I'm still trying to figure out what exactly Felte is (after recently digging in a bit to Vest which Felte docs say can be used)? I see here the svelte action and react hook...is it basically a higher order function that wraps your form? Could I use it with my own AgnosticUI (which wants total control of the UI primitives)? I've done a demo with Vest and my do Yup, but wonder if I should/can do an AgnosticUI one with Felte.

Collapse
pabloabc profile image
Pablo Berganza Author

I wouldn't call it a "higher order function". The reason for the svelte action/react hook is that it needs a reference to your <form> element (the native HTMLFormElement). As long as the component library you use lets you have access to it, you can use Felte with it. I'm not sure if this answers your questions, though!

Collapse
roblevintennis profile image
Rob Levin

👍 Yes it definitely answers -- thanks Pablo!