formMOD
felte
formMOD | felte | |
---|---|---|
14 | 16 | |
37 | 972 | |
- | - | |
0.7 | 7.4 | |
about 1 year ago | 2 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
formMOD
-
Create React forms in a few minutes.
https://github.com/nickorsk2017/formMOD What do you think about this system? Thank you!
-
Why you need a new library for forms on React?
import { Form, Field } from ‘react-final-form’; … … ( Bio {meta.touched && meta.error && {meta.error}} )} /> …
What issue??
- If you currently have a project you need to redoing all your UI components to specific syntax.
- Until today a developers have millions UI libraries.Why can't you just install it and use it?You must make a wrapper components, adapt logic to use library.
We calculated time for redoing a large app.
It need about from few months to fixing bugs, changing syntax…
For a business it crazy huge.
Example 3
import { useForm } from ‘react-hook-form’; … const { register, handleSubmit, errors } = useForm(); … return ( … {errors.lastname && 'Last name is required.’} … );
What issue?
Problem is specific syntax inside UI component.
At first glance short syntax is good.
But you can do it easy without libraries.
const props = helper({…});
Solution
When you need to think about a form library at first moment?
Yes, when you need a validations.
A form library only must know about data.
For example, that a data row is valid or not.
- Not about your app structure.
- Not about JSX or UI components inside.
- Not about UI logic.
A form system must be abstract. It's like a smart useState().
You should make your app easy, just connect your components to data.
How it can look.
After long analyse we decided to make our library.
For creating your forms you need two simple steps:
- Define a scheme which describes validation and some properties of form data.
- Connect your scheme via methods to your UI components.
Scheme
// scheme.ts export default { valid: null, formValue: { first_name: "", last_name: "", }, rules: { full_name: [ ["empty", "please enter your full name"] ], email: [ ["empty", "please enter your email"], ["email", "is not email"], ] } }
Form
//MyForm.ts import {useFormMod} from "formmod"; export const MyForm = () => { const {setValue, getValue, getError, validate} = useFormMod( FORM_SCHEME ); return ( … setValue("full_name", value)} /> … );
Full documentation :
https://doc.formmod.org/
**WE RECOMMEND TO USE LAPTOP OR DESKTOP DEVICE FOR READING DOCUMENTATION.
Advantages:
- No dependencies. This is the power of simple work.This form system don’t know about your components, JSX, your app, store…You can use it with any UI components. No longer need to make wrappers components, understanding JSX syntax.Just use it with anything.
- Easy system, easy code. It’s very simple.
- Save time. Just connect properties to your components.
Important
We have finished our library recently.
Until today we have 151 commits, 14 releases in our repository and this is just the beginning of the work.
We started work with community, fixing documentation.
We need your support, just set a star in gitHub here:
https://github.com/nickorsk2017/formMOD
Other features
Also our library can work with optional, group, composite components.
It has described work with CRUD, store (about mutable data) and more.
It is absolutely free (MIT).
We are working for world community.
We want to make development easer for everybody.
Thank you for reading!
{meta.touched && meta.error && {meta.error}}
)}
/>
…
What problem??
- If you currently have a project you need to redoing all your UI components to specific syntax.
- Until today a developers have millions UI libraries.
Why can't you just install it and use it?
You must make a wrapper components, adapt logic to use library.
We calculated time for redoing a large app.
It need about from few months to fixing bugs, changing syntax…
For a business it crazy huge.
Example 3
import { useForm } from ‘react-hook-form’;
…
const { register, handleSubmit, errors } = useForm();
…
return (
…
{errors.lastname && 'Last name is required.’}
…
);
What problem?
A specific syntax inside UI component.
At first glance short syntax is good.
But you can do it easy without libraries.
const props = helper({…});
Solution
When you think about form library at first moment?
Yes, when you need a validations.
The form library only must know about data.
For example, that a data row is valid or not.
- Not about your app structure.
- Not about JSX or UI components inside.
- Not about UI logic.
You should make your app easy, just connect your components to data.
How it can look.
After long analyse we decided to make our library.
For creating your forms you need two simple steps:
Define a scheme which describes validation and some properties of form data.
Connect your scheme via methods to your UI components.
Scheme
// scheme.ts
export default {
valid: null,
formValue: {
first_name: "",
last_name: "",
},
rules: {
first_name: [
["empty", "please write your first name"]
],
last_name: [
["empty", "please write your last name"]
]
}
}
Form
//MyForm.ts
import {useFormMod} from "formmod";
export const MyForm = () => {
const {setValue, getValue, getError, validate} = useFormMod(
FORM_SCHEME
);
return (
…
label={"First name"}
value={getValue("first_name")}
error={getError("first_name")}
onChange={(value: string) => setValue("first_name", value)}
/>
…
);
Advantages:
- No dependencies. This is the power of simple work.
This form system don’t know about your components, JSX, your app, store…
You can use it with any UI components.
No longer need to make wrappers components, understanding JSX syntax.
Just use it with anything. - Easy system, easy code. It’s very simple.
- Save time. Just connect properties to your components.
Important
We have finished our library recently.
Until today we have 151 commits, 14 releases in our repository and this is just the beginning of the work.
We started work with community, fixing documentation.
We very need your support, just set a star in gitHub here:
https://github.com/nickorsk2017/formMOD
Full documentation for Heroes:
https://doc.formmod.org/
Other features
Also our library can work with optional, group, composite components.
It has described working with CRUD, store, data and more.
It is absolutely free.
We are working for world community.
We want to make development easer for everybody.
Thank you for reading!
-
React.js. Complex react forms are easy. The FormMOD is new library for react forms.
We really need your support, set a star on github here: https://github.com/nickorsk2017/formMOD
felte
-
Big update for sveltekit-superforms!
How does it compare to Felte?
-
sveltekit-superforms alternatives - felte, sveltejs-forms, svelte-forms-lib, svelte-use-form, and svelte-final-form
7 projects | 6 Mar 2023
-
What libraries do you miss from other frameworks like Vue or React?
Don’t know if it can help, but I discovered this only recently, which was really missing for me with svelte: https://felte.dev/
- Introducing Skeleton - a Svelte UI component library for creating web interfaces using Svelte + Tailwind
- Client side form validation
-
Shadow DOM, Firefox and contenteditable
I’ve been experimenting with web components in order to build a wrapper for Felte that can easily be used with vanilla JS. One of Felte’s features is the ability to use custom field components that are not based on the browser’s native inputs (input, textarea, select). The example I show is a div with an attribute [contenteditable=“true”]. While testing this experiment I found some weird behaviour coming from Firefox: while I could perfectly click each field and type of it, if I tried to use the form only using the keyboard (tabbing to each field) the focus moved but trying to type would always result in the text being added to the first field I focused.
-
The use:__ feature giving my editor TS errors, but it works
There’s an example on Felte’s repo setting this up!
-
Using native form with web components + felte no data being passed
Ah. Of course 😅. mwc-textfield is not a native input. Felte relies on native inputs. You can use createField (by creating your own "wrapper" Svelte component that will render your ) or... better yet... you can experiment with what I've been working for the past weeks.
-
Creating a Chai like assertion library using proxies
For the past few weeks I’ve taken the (arguably pointless) work of migrating Felte from using Jest to uvu. This is a really tedious work by itself, but one of details that would have made this work even more tedious is that Jest prefers assertions to the style of expect(…).toBe* while uvu gives you freedom to choose any assertion library, although there’s an official uvu/assert module that comes with assertions to the style of assert.is(value, expected).
-
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!
What are some alternatives?
react-bare-forms - A bare minimal React form library for quick & simple forms.
Superforms - Superforms is a SvelteKit library that helps you with server-side validation and client-side display of forms.
under-control - 📝 🐕 Are you losing sanity every time you need to make a form? Are you have enough of all antipatterns and cursed frameworks in React? Screw that! Treat all forms and inputs as a recursive composable control!
svelte-use-form - The most compact reactive form controller (including Validation) that you'll ever see.
svelte-formify
skeleton - A fully featured UI toolkit for Svelte + Tailwind. [Moved to: https://github.com/skeletonlabs/skeleton]
wordle - A recreation of the popular game Wordle with additional modes and features. Made with Svelte in Typescript.
material-web - Material Design Web Components
Svelte - Cybernetically enhanced web apps
Vest - Vest ✅ Declarative validations framework
tailwindcss-forms - A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Sinon.JS - Test spies, stubs and mocks for JavaScript.