Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jucian0/solidjs-createform
Delightful SolidJs forms
https://github.com/jucian0/solidjs-createform
form form-builder form-validation hacktoberfest hacktoberfest2023 javascript solidjs tyoescript typescript-library
Last synced: 18 days ago
JSON representation
Delightful SolidJs forms
- Host: GitHub
- URL: https://github.com/jucian0/solidjs-createform
- Owner: jucian0
- License: mit
- Created: 2022-06-02T00:12:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-16T21:17:31.000Z (over 2 years ago)
- Last Synced: 2024-09-30T18:18:31.386Z (about 1 month ago)
- Topics: form, form-builder, form-validation, hacktoberfest, hacktoberfest2023, javascript, solidjs, tyoescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 581 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: code-of-conduct.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Welcome to Solidjs createform 👋
[](https://github.com/Jucian0/solidjs-createform/blob/main/LICENCE)
[](https://github.com/Jucian0/solidjs-createform/releases/tag/v1.0.1)
[](coverage)
[](https://www.npmjs.com/package/solid-js-createform)
> A SolidJS package to create forms easily and quickly.
# createform
Createform is an open-source package to create forms for SolidJS applications. It's based on [useForm](https://github.com/Jucian0/useform)
## Motivation
I decided to create a package that could simplify the creation of forms, and, make it easier to use. After a quick research, I found that there are not many packages to create forms for SolidJs, so I decided to create one, that could be used by anyone.
The main idea is to create a form easily and quickly, without many lines of code, fortunately, SolidJs provides us a powerful and easy way to do that.
- Creates form with fields
- Creates form with validation
- Supports custom fields
- Update touched state of form fields independently or all together
- Update values state of form fields independently or all together
- Update errors state of form fields independently or all together
## How to use it
To use `createform` you need to import it into your SolidJS application.
```js
import { createForm } from 'solid-js-createform'
```
Then you can create a form.
```js
const form = createForm({
initialValues: {
name: '',
email: '',
password: ''
}
})
```
Now you can use it everywhere in your SolidJS application.
```js
function App() {
const { register, handleSubmit, errors } = form
function onSubmit(data) {
console.log(data)
}
return (
Submit
)
}
```
## Validation
CreateForm uses yup validation schema, so you just need to pass a validation schema to the `createForm` function.
```js
const form = createForm({
initialValues: {
name: '',
email: '',
password: ''
},
validationSchema: yup.object({
name: yup.string().required('Name is required'),
email: yup.string().email('Invalid email').required('Email is required'),
password: yup
.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required')
})
})
```
## API
`createForm` receives an object with the following properties:
### `initialValues`: An object with the initial values of the form.
### `validationSchema`: A validation schema to validate the form. By default, `createForm` uses yup validation schema.
`createForm` returns an object with the following properties:
### `register`: Register a field to the form.
```js
const form = createForm({
initialValues: {
name: '',
email: '',
password: ''
}
})
const { register, handleSubmit, errors } = form
```
### `handleSubmit`: Handle form submit.
```jsx
const form = createForm...
const { register, handleSubmit, errors } = form
Submit
```
### `errors`: Get errors of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors } = form
{errors.name}
```
### `touched`: Get touched state of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, touched } = form
{touched.name ? errors.name : ''}
```
### `values`: Get values of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, values } = form
createEffect(() => {
console.log(values.name)
})
```
### `setTouched`: Set the touched state of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, setTouched } = form
setTouched('name')}>Touch
```
### `setValues`: Set the values of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, setValues } = form
setValues({ name: 'John' })}>Set values
```
or
```jsx
const form = createForm...
const { register, handleSubmit, errors, setValues } = form
setValues('name','John')}>Set values
```
### `setErrors`: Set errors of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, setErrors } = form
setErrors('name', 'Name is required')}>Set errors
```
or
```jsx
const form = createForm...
const { register, handleSubmit, errors, setErrors } = form
setErrors({name:'Name is required'})}>Set errors
```
### `resetForm`: Reset the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, resetForm } = form
resetForm()}>Reset form
```
### `resetValues`: Reset values of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, resetValues } = form
resetValues()}>Reset values
```
### `resetErrors`: Reset errors of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, resetErrors } = form
resetErrors()}>Reset errors
```
### `resetTouched`: Reset the touched state of the form.
```jsx
const form = createForm...
const { register, handleSubmit, errors, resetTouched } = form
resetTouched()}>Reset touched
```
## Let us know what you think
Feel free to [open an issue](https://github.com/Jucian0/solidjs-createform/issues) if you have any feedback, or if you want to contribute.
## Show your support
Give us a star on [GitHub](https://github.com/Jucian0/solidjs-createform) if you like this project.