# react-super-useform

> An advanced and easy to use useForm hook for React

Latest version **0.1.48** (published 2020-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-super-useform
pnpm add react-super-useform
yarn add react-super-useform
bun add react-super-useform
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.48 |
| Published | 2020-06-15 |
| First published | 2020-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 159.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | anthonyjeamme |
| Maintainers | jinga |

## Links

- npm: https://www.npmjs.com/package/react-super-useform
- Repository: https://github.com/anthonyjeamme/react-super-useform
- Homepage: https://anthonyjeamme.github.io/react-super-useform
- Issues: https://github.com/anthonyjeamme/react-super-useform/issues
- npm.io page: https://npm.io/package/react-super-useform

## Dependencies (2)

- [uniqid](https://npm.io/package/uniqid.md) ^5.2.0
- [@types/uniqid](https://npm.io/package/@types/uniqid.md) ^5.2.0

## Recent versions

- 0.1.48 (latest) — 2020-06-15
- 0.1.47 — 2020-06-12
- 0.1.46 — 2020-06-10
- 0.1.45 — 2020-06-10
- 0.1.44 — 2020-06-06
- 0.1.43 — 2020-06-06
- 0.1.42 — 2020-06-03
- 0.1.41 — 2020-06-02
- 0.1.40 — 2020-05-26
- 0.1.39 — 2020-05-25
- 0.1.38 — 2020-05-24
- 0.1.37 — 2020-05-24
- 0.1.35 — 2020-05-20
- 0.1.34 — 2020-05-20
- 0.1.33 — 2020-05-20
- … 32 more at https://npm.io/package/react-super-useform/versions

## README

# Warning

Lib is in development. This is an alpha version. ⚠️

# Usage

Installation

```
npm i --save react-super-useform
```


```javascript
import useForm from 'react-super-useform'

const form = useForm(formSchema, initData)
```

# Schema

```javascript
const formSchema = {

	comment: text_field(),
	informations: {
		fistname: text_field(),
		lastname: text_field()
	}
}
```

# Connect form

```JSX
<Input {...form.get('comment')}/>
<Input {...form.get('informations.firstname')}/>
<Input {...form.get('informations.lastname')}/>
```

provide 3 props:
- value
- setValue
- error

you can make your own like that :

```JSX
const Input = ({value, setValue, error}) => (
	<input value={value} onChange={e=>{
		setValue(e.target.value)
	}} className={error?'error':''}/>
)
```

# Arrays

```javascript
const formSchema = {
	list:{
		type: Array,
		children: {
			name: text_field()
		},
	}
}
```

## Add element to list

```javascript
form.get('list').push()
```

## Get elements

```javascript
form.get('list').map((item,i)=>(
	<Input {...item.get('name')}>
))
```

## Get one element

```JSX
<Input {...form.get('list.0.name')}>
```

## Remove an element


```javascript
form.get('list').remove(i)
```

or

```javascript
form.get('list').map((item,i)=>(
	<>
		<button onClick={()=>item.remove()}>
			remove
		</button>
	</>
))
```

# Event

You can subscribe to form event :

```javascript
const myEvent = e => {
	console.log('form has been changed')
}

form.addEventListener('change',myEvent)
```

And unsubscribe

```javascript
form.removeEventListener('change',myEvent)
```

# Error checking

You can know if data are valid in form by reading :

```javascript
form.isValid
```

You can make a check, that set errors on each field list this :

```javascript
form.checkErrors()
```

# Output

```javascript
form.toJSON()
```

---
_Source: https://npm.io/package/react-super-useform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._