# form-handler-react

> ## Overview

Latest version **0.0.0** (published 2022-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install form-handler-react
pnpm add form-handler-react
yarn add form-handler-react
bun add form-handler-react
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2022-02-24 |
| First published | 2022-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 27.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | João Vitor Muniz Lopes |
| Maintainers | joaovitor32 |

## Links

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

## Dependencies (14)

- [jest](https://npm.io/package/jest.md) ^27.4.7
- [react](https://npm.io/package/react.md) 17.0.2
- [ts-jest](https://npm.io/package/ts-jest.md) ^27.1.3
- [react-dom](https://npm.io/package/react-dom.md) 17.0.2
- [babel-jest](https://npm.io/package/babel-jest.md) ^27.4.6
- [commitlint](https://npm.io/package/commitlint.md) ^16.2.1
- [react-scripts](https://npm.io/package/react-scripts.md) ^5.0.0
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) 4.13.0
- [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0
- [rollup-plugin-delete](https://npm.io/package/rollup-plugin-delete.md) ^2.0.0
- [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^7.0.2
- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^27.4.6
- [eslint-plugin-import-helpers](https://npm.io/package/eslint-plugin-import-helpers.md) ^1.2.0
- [rollup-plugin-peer-deps-external](https://npm.io/package/rollup-plugin-peer-deps-external.md) ^2.2.4

## Recent versions

- 0.0.0 (latest) — 2022-02-24

## README

# form-handler-react

## Overview

   
##### A simple lightweight form handler made in React for simple forms wich can be integrated with your css styles and fields validations.

##### Installation

```bash
npm i form-handler-react
```
### Properties

| Prop                      | Description                                                                                                                                                                                                                                                                                                             | Default        |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`onSubmit`**               |  Function to handle form data   
| **`validations`**               | A set of functions to validate inputs by name | none
| **`formStyle `**               | external form style | {}
| **`styleErrorParagraph`**               | external style for error display | {}
| **`styleErrorDiv`**               | external style for error container | {}
| **`classNameErrorDiv`**               | className for error container | none
| **` classNameErrorParagraph`**               | className for error display | none
| **`classNameForm`**               | className for form | none

## License

[MIT](https://choosealicense.com/licenses/mit/)

### How to use

```tsx
import React from 'react'

import Form from 'form-handler-react'

const View: React.FC = () => {
  return (
    <>
      <Form
        onSubmit={data => {
          console.log(data)
        }}
        styleErrorParagraph={{ color: 'red', fontWeight: 'bold' }}
        validations={{
          cpf: text => {
            const regex =
              /^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2}|[0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2})$/
            return regex.test(String(text))
          },
        }}
      >
        <div>
          <input name="name1" type="text" value="value" />
          <div>
            <input name="cpf" type="text" value="value" />
          </div>
        </div>
        <button
          style={{
            backgroundColor: 'blue',
            color: 'white',
            borderRadius: '16px',
            border: 'none',
            padding: '8px 16px',
          }}
          type="submit"
        >
          Salvar
        </button>
      </Form>
    </>
  )
}

export default View
```

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