Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pablo-abc/felte
An extensible form library for Svelte, Solid and React
https://github.com/pablo-abc/felte
form form-validation forms javascript react solidjs svelte typescript validation
Last synced: 4 days ago
JSON representation
An extensible form library for Svelte, Solid and React
- Host: GitHub
- URL: https://github.com/pablo-abc/felte
- Owner: pablo-abc
- License: mit
- Created: 2021-01-27T20:12:14.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-05T19:46:01.000Z (about 1 month ago)
- Last Synced: 2024-12-04T21:38:16.444Z (9 days ago)
- Topics: form, form-validation, forms, javascript, react, solidjs, svelte, typescript, validation
- Language: TypeScript
- Homepage: https://felte.dev
- Size: 6.31 MB
- Stars: 1,021
- Watchers: 6
- Forks: 43
- Open Issues: 73
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-solid-js - Felte
README
# Felte: A form library for Svelte, Solid and React
[](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[](https://bundlephobia.com/result?p=felte)
[](https://www.npmjs.com/package/felte)
[](https://codecov.io/gh/pablo-abc/felte)
[](https://twitter.com/feltejs)
[](https://twitter.com/Pablo_ABC)
[](#contributors-)
Felte is a simple to use form library for Svelte, Solid and React. No `Field` or `Form` components are needed, just plain stores and actions to build your form however you like. You can see it in action in this [CodeSandbox demo](https://codesandbox.io/s/felte-demo-wce2h?file=/App.svelte)!
## Features
- Single action to make your form reactive.
- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).
- Provides stores and helper functions to handle more complex use cases.
- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
- Handles addition and removal of form controls during runtime.
- Official solutions for error reporting using `reporter` packages.
- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.
- Supports validation with [yup](./packages/validator-yup), [zod](./packages/validator-zod), [superstruct](./packages/validator-superstruct) and [vest](./packages/validator-vest).
- Easily [extend its functionality](https://felte.dev/docs/svelte/extending-felte).
## Simple usage example
### Svelte
```html
import { createForm } from 'felte';
const { form } = createForm({
onSubmit: async (values) => {
/* call to an api */
},
});
Sign In
```
### Solid
```jsx
import { createForm } from '@felte/solid';
function Form() {
const { form } = createForm({
onSubmit: async (values) => {
/* call to an api */
},
});
return (
Sign In
);
}
```
> [!IMPORTANT]
>
> To use the `use-*` directive on **Solid**. [You need to extend the JSX namespace](https://docs.solidjs.com/reference/jsx-attributes/use#use). For example:
```typescript
// src/global.d.ts
declare global {
declare module "solid-js" {
namespace JSX {
interface Directives {
form: (node: HTMLFormElement) => void;
}
}
}
}
```
### React/Preact
```jsx
import { useForm } from '@felte/react';
// if using preact, use `@felte/preact`
function Form() {
const { form } = useForm({
onSubmit: async (values) => {
/* call to an api */
},
});
return (
Sign In
);
}
```
### Vue
```html
import { useForm } from '@felte/vue';
const { vForm } = useForm({
onSubmit: async (values) => {
/* call to an api */
},
});
Sign In
```
### VanillaJS with Web Components
```html
import 'https://unpkg.com/@felte/[email protected]/dist/min/felte-form.js';
const felteForm = document.querySelector('felte-form');
felteForm.configuration = {
onSubmit: async (values) => {
console.log(values);
},
};
Sign In
```
> This example works without a bundler! Copy its contents to an HTML file and open it on your browser. A more complete example like this, with validation and error reporting, can be found [here](./examples/web-component/cdn).
## More examples
You can find fully functional examples on the [/examples](./examples) directory of this repository. You should be able to open them on CodeSandbox by replacing github's url to `githubbox`. E.g. Replace `https://github.com/pablo-abc/felte/tree/main/examples/svelte/basic` with `https://githubbox.com/pablo-abc/felte/tree/main/examples/svelte/basic`.
## Packages
This repository is a mono-repo containing multiple packages located in the `packages` directory. Maintained using [pnpm](https://pnpm.io) and [Changesets](https://github.com/atlassian/changesets).
### Svelte
We provide two packages that are specific to Svelte:
#### [felte](./packages/felte)
This is the core package that contains all the basic functionality you need to handle your forms in Svelte. Felte optionally allows you to use error reporters (see them as plugins) to prevent you from needing to find a way to display your errors on your form manually. For this we provide already some reporter packages contained in this same repo.
#### [@felte/reporter-svelte](./packages/reporter-svelte)
A reporter package that uses a Svelte component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.
### Solid
We provide two packages that are specific to Solid:
#### [@felte/solid](./packages/solid)
This is the core package that contains all the basic functionality you need to handle your forms in Solid. Same as `felte` but specifically made for Solid.
#### [@felte/reporter-solid](./packages/reporter-solid)
A reporter package that uses a Solid component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.
### React
We provide two packages that are specific to React:
#### [@felte/react](./packages/react)
This is the main package that contains the basic functionality you need to handle your forms in React. Same as `felte` but specifically made for React.
#### [@felte/reporter-react](./packages/reporter-react)
A reporter packages that uses a React component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.
### Preact
We provide two packages that are specific to Preact:
#### [@felte/preact](./packages/preact)
This is the main package that contains the basic functionality you need to handle your forms in Preact. Same as `felte` but specifically made for Preact. The API is the same as `@felte/react` so you can refer to the same documentation.
#### [@felte/reporter-preact](./packages/reporter-preact)
A reporter packages that uses a Preact component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers. The API is the same as `@felte/react` so you can refer to the same documentation.
### Vue
We provide (experimental) support for [Vue](https://vuejs.org) with the following package:
#### [@felte/vue](./packages/vue)
This is package contains the basic functionality you need to handle your forms in Vue. Same as `felte` but specifically made for Vue. The API is similar to that of `felte` but using a custom directive to register your form _and_ returning "accessors" (similar to the react/preact/solid packages) that resolve into reactive `ref`s.
There's no documentation for this right now so use at your own risk.
### VanillaJS
We provide three packages that can be used with only VanillaJS. Two of them using [Web Components](https://www.webcomponents.org/introduction). These elements do not use the shadow DOM since there is no reason to isolate styles.
#### [@felte/element](./packages/element)
This is the main package that contains the basic functionality you need to handle your forms in vanilla JS using a custom element. Similar to `felte` but specifically made to be used as a custom element. This is the recommended way to handle your forms when using Vanilla JS. Web components are [well supported by all major browsers](https://caniuse.com/custom-elementsv1) so this should be a safe option unless you need to support legacy browsers.
#### [@felte/reporter-element](./packages/reporter-element)
A reporter packages that uses a custom element to display validation messages on the DOM. This the recommended way to display your validation messages when using vanilla JS.
#### [@felte/vanilla](./packages/vanilla)
This is the main package that contains the basic functionality you need to handle your forms in vanilla JS. Similar to `felte` and other integrations but with all code related to frameworks removed. This requires a bit more work to use, since you'll be the one in charge of cleaning up subscribers and listeners on it. It's API is basically the same as `felte` (Svelte's integration) so you _can_ use Svelte's documentation as a reference. This can be used as a starting point to create your own integration/package for other environments. When it comes to vanilla JS we'd recommend using `@felte/element` using web components.
### Validators
The following packages can be used with any of the framework specific `felte` wrappers:
#### [@felte/validator-yup](./packages/validator-yup)
A utility package to help you validate your form with [Yup](https://github.com/jquense/yup).
#### [@felte/validator-zod](./packages/validator-zod)
A utility package to help you validate your form with [Zod](https://github.com/colinhacks/zod).
#### [@felte/validator-superstruct](./packages/validator-superstruct)
A utility package to help you validate your form with [Superstruct](https://docs.superstructjs.org).
#### [@felte/validator-vest](./packages/validator-vest)
A utility package to help you validate your form with [Vest](https://vest.vercel.app).
### Reporters
The following packages can be used with any of the framework specific `felte` wrappers:
#### [@felte/reporter-tippy](./packages/reporter-tippy)
A reporter that uses [Tippy.js](https://atomiks.github.io/tippyjs/) to display your validation messages without needing any extra work.
#### [@felte/reporter-cvapi](./packages/reporter-cvapi)
A reporter that uses the browser's [constraint validation API](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation) to display your validation messages.
#### [@felte/reporter-dom](./packages/reporter-dom)
A reporter that displays the error messages in the DOM, either as a single element or a list of elements.
## Contributing
If you want to contribute to this project you may check [`CONTRIBUTING.md`](./CONTRIBUTING.md) for general guidelines on how to do so.
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Pablo Berganza
π» π π€ π§ β οΈ
Panagiotis Kapros
π»
Benjamin Bender
π» π€ π
Abhijit Kar γ
π π€
Hugo MaestΓ‘
π» π€
websocket98765
π
avimar
π
Umang Galaiya
π» π
Gildas Garcia
π» π
basaran
π» π
Evyatar
π»
Julian Schurhammer
π»
Koichi Kiyokawa
π
Ryan Christian
π
Ikko Ashimine
π
pasqui23
π»
Immanuel Calvin Herchenbach
π
dawidmachon
π
Emil Celustka
π»
Callum Macdonald
π
Jason
π
John Winston
π»
Timo Wilhelm
π»
jfreyheit
π
Urs Honegger
π
Bradley Lewis
π
Julien Tome
π»
xvenge00
π»
Alfredo Maria Milano
π»
Carlo Taleon
π
John Paul Calvo
π»
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
MIT
## Browser support
While further testing would be needed to provide an accurate answer, Felte should work in all evergreen browsers. Polyfills might be needed if you target older browsers such as IE 11 for, at least, `Promise.all`, `Element.closest`, `URLSearchParams`, `fetch`, `CustomEvent` and iterators.