# react-formy

> A light, simple and fast way to keep form state.

Latest version **5.13.4** (published 2022-04-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-formy
pnpm add react-formy
yarn add react-formy
bun add react-formy
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.13.4 |
| Published | 2022-04-19 |
| First published | 2016-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 260.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Wellington Guimaraes |
| Maintainers | wellguimaraes |

## Links

- npm: https://www.npmjs.com/package/react-formy
- npm.io page: https://npm.io/package/react-formy

## Dependencies (3)

- [moize](https://npm.io/package/moize.md) ^6.1.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.15

## Recent versions

- 5.13.4 (latest) — 2022-04-19
- 5.13.3 — 2022-04-01
- 5.13.2 — 2020-10-20
- 5.13.1 — 2020-10-20
- 5.13.0 — 2020-10-19
- 5.12.7 — 2020-10-05
- 5.12.6 — 2020-09-08
- 5.12.5 — 2020-09-03
- 5.12.4 — 2020-08-20
- 5.12.3 — 2020-08-18
- 5.12.2 — 2020-08-18
- 5.12.1 — 2020-08-18
- 5.12.0 — 2020-08-14
- 5.9.2 — 2020-08-13
- 5.9.1 — 2020-08-13
- … 79 more at https://npm.io/package/react-formy/versions

## README

# React Formy
A light, simple and fast way to keep form state.

> Don't use it inside React.StrictMode

## Install it
`npm install react-formy --save`

## Use it

Simple usage

```js
import * as React from 'react';
import useFormy from 'react-formy';

function MyFormComponent() {
    const { handleSubmit, field } = useFormy()
    
    return (
      <form onSubmit={handleSubmit(values => console.log(values))}>
        <input type="text" {...field('user.name')} />
        <input type="email" {...field('user.email')} />
        <button type="submit">Submit</button>
      </form>
    )
}

export default MyFormComponent
```

### Add some validation
```js
import React from 'react';
import useFormy, { setErrorPropName } from 'react-formy'
import validatejs from 'validate.js'

setErrorPropName('errorMessage') // "errorText" is the default error prop name

function MyFormComponent() {
  const { field, handleSubmit } = useFormy({
      validate: (values) => {
          return validatejs(values, {
            'user.phone': { presence: true, format: /^\(\d+2)\ \d{5}-\d{4}/ },
            'user.address': { presence: true }
          });
      } 
  })

  // ...
      
}
```

### Array fields
```js
import React from 'react';
import useFormy from 'react-formy'

function MyFormComponent() {
    const { field } = useFormy()
    const contacts = field('contacts').value || []
    
    return (
      <form>
        {
          contacts.map((it, i) => (
            <div>
              <input type="text" {...field(`contacts[${i}].name`)} />
              <button type="button" onClick={ () => field('contacts').remove(i) }>Remove</button>
            </div>
          )) 
        }
        <button onClick={() => field('contacts').push({ name: 'Some Default Value' })}>Add contact</button>
      </form>
    )
}
```

### Reset/Preset form
```js
const { resetForm } = useFormy()

resetForm(); // Reset form
resetForm({ user: { name: 'John Doe' } }) // Reset form with user.name preset value
```

### Set a field value programmatically
```js
const { setFormValues } = useFormy()

setFormValues({ some: { deep: { field: 'value' }} })
```

### Get form values at anytime
```js
const { getFormValues } = useFormy()

console.log(getFormValues())
```

## License
MIT License

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