Rocket useForm

WARNING: library in alpha version

Rocket useForm is a rich React library based on useRef.
It's an easy-to-use solution to build big and complex forms.

Installation

``bash
npm i rocket-useform
`

Getting started

`tsx

const data = {
name: 'john doe'
}

const schema = Schema({
name: textField({required:true, validation: (name)=>name.length > 3})
})

const MyForm = () => {

const form = useForm(data, schema)

const handleSave = () => {

if(form.checkForm()){
console.log(form.toJSON())
form.setModified(false)
} else {
console.warn('Il y a des champs incorrects !')
}
}

return (


`

Main concepts

$3

`tsx
const schema = Schema({
name: textField()
})
`

Possible fields types:

- textField
- numberField
- booleanField
- arrayField

Each field schema can take a param argument, where you will define validation rules, defaultValue and so on:

`tsx
const schema = Schema({
email: textField({
validators: [Validator.TEmail]
})
})
`

See docs for more details

$3

`jsx
const cityField = form.get('user.address.city')
`

Can also be splitted :

`jsx
const addressField = form.get('user.address')
const cityField = addressField.get('city')
`

Get parent :

`jsx
const cityField = form.get('user.address.city')
const addressField = addressField.get('parent')
`

From root :

`jsx
const cityField = form.get('user.address.city')
const nameField = addressField.get('root.user.name')
`

$3

Form is a tree of Nodes reachable through path:

`jsx
const rootNode = form.get('')
const userNode = rootNode.get('user')
`

$3

Rocket useForm is stateless for performance. It means that data flow is unidirectional.

- You need sur match input with defaultValue :

`jsx
defaultValue={form.get('name').value}
onChange={e => form.get('name').update(e.target.value)}
>
`

But don't worry ! You can force refresh this way :

`jsx
defaultValue={form.get('name').value}
onChange={e => form.get('name').update(e.target.value, true)}
>
`

update function take a boolean as second argument : forceRefresh

Schema

$3

- Text field

`tsx
const schema = {
name: textField()
}
`

- Number field

`tsx
const schema = {
name: numberField()
}
`

- Boolean field

`tsx
const schema = {
name: booleanField()
}
`

$3

$3

`tsx
const schema = {
users: arrayField({
name: textField()
})
}
``

$3