# @lucasftz/use-form

> A powerful form library for error handling and managing input values without the need for controlled components, allowing you to write more concise and readable code.

Latest version **1.0.2** (published 2023-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lucasftz/use-form
pnpm add @lucasftz/use-form
yarn add @lucasftz/use-form
bun add @lucasftz/use-form
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-03-19 |
| First published | 2023-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 29 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | lucasftz |
| Maintainers | lucasftz |

## Links

- npm: https://www.npmjs.com/package/@lucasftz/use-form
- Repository: https://github.com/lucasftz/use-form
- Homepage: https://github.com/lucasftz/use-form#readme
- Issues: https://github.com/lucasftz/use-form/issues
- npm.io page: https://npm.io/package/@lucasftz/use-form

## Recent versions

- 1.0.2 (latest) — 2023-03-19
- 1.0.1 — 2023-03-19
- 1.0.0 — 2023-03-19

## README

# @lucasftz/use-form

> A powerful form library for error handling and managing input values without the need for controlled components, allowing you to write more concise and readable code.

[![NPM](https://img.shields.io/npm/v/@lucasftz/use-form.svg)](https://www.npmjs.com/package/@lucasftz/use-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @lucasftz/use-form
```

## Quickstart

```tsx
import React from 'react'

import { useForm } from '@lucasftz/use-form'

interface FormData {
  username: string;
}

function Example() {
  const { formHandler, errors } = useForm<FormData>({
    schema: {
      username: (value) => value.length > 3,
    },
  });

  const handleSubmit = formHandler(({ e, formData }) => {});

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" />
      <button>Submit</button>
    </form>
  );
}
```

## API

```ts
interface ReturnType<T> {
  errors: { [Key in keyof T]: boolean },
  formHandler: ({ e, formData }: { e: SyntheticEvent<HTMLFormElement>, formData: T }) => void
}

interface Props<T> {
  schema: { [Key in keyof T]: (value: T[Key]) => boolean }
}

function useForm<TFormData>({ schema }: Props<TFormData>): ReturnType<TFormData> {
  // ...
}
```
The useForm hook returns a function with an object with two properties as a parameter:

`formHandler` is a function that takes a callback function as its argument. This callback function will be called when the form is submitted and all validation checks are successful. The callback function receives an object with two properties: e, the form event, and formData, an object containing the form data.

`errors` is an object with the keys of FormData and a boolean value of if that key has errored. This is revalidated on every submit.

`schema` (required prop) is an object that defines the validation rules for the form fields. Each key corresponds to a field in the form, and the value is a validation function that receives the field value as its argument and returns a boolean indicating whether the value is valid.

## License

MIT © [lucasftz](https://github.com/lucasftz)

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