Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 months ago
JSON representation

Delightful SolidJs forms

Awesome Lists containing this project

README

        

# Welcome to Solidjs createform 👋

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Jucian0/solidjs-createform/blob/main/LICENCE)
[![](https://img.shields.io/badge/version-1.0.1-orange.svg)](https://github.com/Jucian0/solidjs-createform/releases/tag/v1.0.1)
[![COverage](https://img.shields.io/badge/coverage-98.31%25-green)](coverage)
[![COverage](https://img.shields.io/badge/npm-v1.0.1-red)](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.