# @lorenzoelenkov/reactoform

> A library that streamlines the creation and management of forms in ReactJS

Latest version **0.2.3** (published 2023-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lorenzoelenkov/reactoform
pnpm add @lorenzoelenkov/reactoform
yarn add @lorenzoelenkov/reactoform
bun add @lorenzoelenkov/reactoform
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2023-02-08 |
| First published | 2023-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 90.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | LorenzoElenkov |
| Maintainers | lorenzoelenkov |
| Keywords | react, react-form, form, forms, react-hook-form |

## Links

- npm: https://www.npmjs.com/package/@lorenzoelenkov/reactoform
- Repository: https://github.com/LorenzoElenkov/Reactoform
- Homepage: https://github.com/LorenzoElenkov/Reactoform#readme
- Issues: https://github.com/LorenzoElenkov/Reactoform/issues
- npm.io page: https://npm.io/package/@lorenzoelenkov/reactoform

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.3 (latest) — 2023-02-08
- 0.2.2 — 2023-02-08
- 0.2.1 — 2023-02-08
- 0.1.9 — 2023-02-08
- 0.1.8 — 2023-02-07
- 0.1.7 — 2023-02-07
- 0.1.6 — 2023-02-07
- 0.1.5 — 2023-02-07
- 0.1.4 — 2023-01-30
- 0.1.3 — 2023-01-29
- 0.1.2 — 2023-01-29
- 0.1.1 — 2023-01-29
- 0.1.0 — 2023-01-29

## README

# Reactoform v0.2
API |Examples|
|--|--|


### Introduction

**Reactoform** library deals with form creation and validation, while changing inputs, contrary to other approaches, when hitting 'Submit' button. Therefore, 'Submit' button stays disabled until all inputs were validated correctly.

**Reactoform** also does not expose inputs as other libraries do. Instead, it requires an array of objects, where each object is representing one single input with its options configured.

**Reactoform** library was made by Lorenzo Elenkov as that is his own solution to form creation.


### Installation

    npm install @lorenzoelenkov/reactoform



### Quickstart

    
    import { Form } from '@lorenzoelenkov/reactoform
    
    const formInputs = [
	    { 
		    label: 'Email',
		    type: 'text',
		    validation: {
			    email: true
		    }
	    },
	    {
		    label: 'Password',
		    type: 'password',
		    validation: {
			    pattern: { value: /[A-Z]+[a-z]+[0-9]+[!@#]+/, error: 'Password must contain one lowercase, one uppercase, one number and one special character' },
			    minLength: { value: 8, error: 'Password must be at least 8 characters' }
		    }
	    }
    ]
    
    const App = () => {
	    return (
		    <div className="App">
			    <Form data={formInputs} onSubmit={value => console.log(value)}
		    </div>
	    )
    }
    

There are other types and options for inputs. You can checkout the API or Examples.

### Styling
Currently, you can include `customClass` field in `formInputs` object for each input. With a `customClass` set, you can style your labels, inputs and error spans through:

 - Vanilla CSS
 - CSS Modules
 - SASS/LESS

*Other styling options will be integrated in the future, for reference look at the roadmap*

### Roadmap

**Q1 2023**

 - Invalid inputs have a red border
 - Checkbox input
 - Multi-select input
 - Switch input
 - Animations

**Q2 2023**

 - Material UI integration
 - AntD UI integration

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