Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ragokan/solform
A form management library for SolidJS that is very lightweight and simple!
https://github.com/ragokan/solform
form form-management solidjs
Last synced: 14 days ago
JSON representation
A form management library for SolidJS that is very lightweight and simple!
- Host: GitHub
- URL: https://github.com/ragokan/solform
- Owner: ragokan
- Created: 2021-12-20T10:49:46.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-17T15:21:39.000Z (about 1 year ago)
- Last Synced: 2024-11-02T19:34:11.607Z (about 1 month ago)
- Topics: form, form-management, solidjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/solform
- Size: 31.3 KB
- Stars: 27
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-solid-js - Solform - Very lightweight and simply managed forms. (📦 Components & Libraries / Form)
README
# solform
### A form management library for SolidJS that is very lightweight and simple!
#### (UPDATE) Just wanted to say, I was busy a little bit but soon, I will update this package to latest version of everything with all the fixes.
[](https://www.npmjs.com/package/solform)
[](https://github.com/ragokan/solform)
### Why solform
- Very easy, fast, lightweight and powerful!
- It has built-in validation.
- You can easily customize it!
- Full type support
### Create form
```tsx
// Simplest
import { createForm } from "solform";
function App() {
const { register } = createForm<{ name: string }>();
return ;
}
```
```tsx
// Next Level
import { createForm, requiredValidator, emailValidator } from "solform";
function App() {
const { register, submit, errors } = createForm<{
email: string;
count: number;
}>({
validators: {
count: requiredValidator("Count is required"),
email: [
requiredValidator("This field is required"),
emailValidator("Value should be email!"),
],
},
onSubmit: (values) => {
// type safe values
console.log(values);
},
});
return (
{errors.email && {errors.email}
}
{/* When you read count, it will be converted to number */}
Submit
);
}
```
```tsx
// Full
import { createForm, requiredValidator, emailValidator } from "solform";
function App() {
const { register, submit, loading, getAllValues, getValue, setValue, errors, watch } =
createForm<{ email: string; count: number }>({
initialValues: {
count: 0,
},
validators: {
count: requiredValidator("Count is required"),
email: [
requiredValidator("This field is required"),
emailValidator("Value should be email!"),
],
},
onSubmit: async (values) => {
await sleep(2000); // it will automatically set loading to true
console.log(values);
// loading is false again
},
});
// will call the given function whenever the count changes
watch("count", (updatedCount) => {
console.log(updatedCount);
});
return (
{errors.email && {errors.email}
}
{/* When you read count, it will be converted to number */}
{loading() ? "Loading..." : "Submit"}
);
}
function sleep(arg0: number) {
throw new Error("Function not implemented.");
}
```
### Built-in validators
- minLengthValidator(minLength, errorMessage)
- maxLengthValidator(maxLength, errorMessage)
- requiredValidator(errorMessage)
- emailValidator(errorMessage)
### Creating new validators
```ts
const minimumNumberValidator =
(minNumber: number, errorMessage: string): SolFormValidator =>
(val) =>
val < minNumber ? errorMessage : undefined;
```
### Tactics
- Always use **watch** inside a component, because it will call **onMount** and **onCleanup**.
- More soon...
### What is next?
- Support for more fields, such as **radio group**
- Validate on change option.
### How to contribute?
- Get a fork of this package, do your changes and create a pull request.
- Found a bug? create an issue.