https://github.com/tonai/react-per-form

https://github.com/tonai/react-per-form

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tonai/react-per-form
• Owner: tonai
• License: mit
• Created: 2024-02-05T08:41:43.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-30T09:24:58.000Z (9 months ago)
• Last Synced: 2024-04-30T10:38:27.455Z (9 months ago)
• Language: TypeScript
• Size: 1.23 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @per-form/react



  

  





  Fast and easy form validation for React based on native HTML capabilities





  Documentation





[![NPM Version](https://img.shields.io/npm/v/@per-form/react)](https://www.npmjs.com/package/@per-form/react)

[![GitHub License](https://img.shields.io/github/license/tonai/react-per-form)](https://github.com/tonai/react-per-form/blob/main/LICENSE)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@per-form/react)](https://bundlephobia.com/package/@per-form/react)



## Features

- ☯ Very easy to use

- 🚀 Really fast

- 🏋 Extra small bundle size

- 🤯 Can works without any state

- 💅 Native and customizable errors

- 👯 Multiple validation modes

- 📑 Custom validation with

  - 🎉 Cross inputs validation

  - 😎 Async validation

  - 🔥 Support dynamic form

- 💬 Custom messages / translations

- 💯 Fully tested

- 📚 Support controlled components and UI libraries

- ⚡️ Compatible with Next.js server actions

- 👀 Watch values

- 💪 And much more...

## Install

```bash

# npm

npm install @per-form/react

# yarn

yarn add @per-form/react

# pnpm

pnpm install @per-form/react

```

## Usage

### With hook

```tsx

import type { FormEvent } from 'react';

import { type IFormValues, useForm } from '@per-form/react';

export default function Demo() {

  function handleSubmit(e: FormEvent, values: IFormValues) {

    console.log(values);

  }

  const { formProps } = useForm({

    onSubmit: handleSubmit,

  });

  return (

    

      

      Submit

    

  );

}

```

### Or with component

```tsx

import type { FormEvent } from 'react';

import { Form, type IFormValues } from '@per-form/react';

export default function Demo() {

  function handleSubmit(e: FormEvent, values: IFormValues) {

    console.log(values);

  }

  return (

    

      

      Submit

    

  );

}

```

Check the [documentation](https://tonai.github.io/react-per-form/) for more.

## Examples

Check the [example App](https://github.com/tonai/react-per-form/tree/main/example-app).

Clone this repo and then run:

```bash

npm i

npm run dev

```