open-index/open-npm huggingface dataset:
npm package: @per-form/react
Description: React library for form validation
Author: Tony Cabaye
Latest version: 0.3.1

# @per-form/react

<p align="center">
  <img alt="@per-form/react Logo" src="/doc/static/img/logo.svg#gh-light-mode-only" width="200" />
  <img alt="@per-form/react Logo" src="/doc/static/img/logo-dark.svg#gh-dark-mode-only" width="200" />
</p>
<p align="center">
  Fast and easy form validation for React based on native HTML capabilities
</p>
<p align="center">
  <a href="https://tonai.github.io/react-per-form/" target="_blank">Documentation</a>
</p>
<div align="center">

<!-- [![NPM Downloads](https://img.shields.io/npm/dm/@per-form/react?style=flat)](https://www.npmjs.com/package/@per-form/react) -->

[![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)

<!-- [![GitHub Repo stars](https://img.shields.io/github/stars/tonai/react-per-form)](https://github.com/tonai/react-per-form/blob/main/LICENSE) -->

</div>

## 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 react-hook-form
# yarn
yarn add react-hook-form
# pnpm
pnpm install react-hook-form
```

## 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<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { formProps } = useForm({
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      <button type="submit">Submit</button>
    </form>
  );
}
```

### 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<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  return (
    <Form onSubmit={handleSubmit}>
      <input name="text" required />
      <button type="submit">Submit</button>
    </Form>
  );
}
```

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
```
npm package: @peraglot-labs/developer-tools
Description: This is an optional set of tools to assist with the [Pera Localization](https://github.com/apps/pera-localization) integration. See [this example](https://github.com/Pera-Localization/i18n-example) for usage.
Author: Pera Labs
Latest version: 0.0.3

This is an optional set of tools to assist with the [Pera Localization](https://github.com/apps/pera-localization) integration. See [this example](https://github.com/Pera-Localization/i18n-example) for usage.
npm package: @peralva/custom-date
Description: Custom Date
Author: Bruno Peralva
Latest version: 1.0.2

# @peralva/custom-date

Custom Date

[![NPM Version](https://img.shields.io/npm/v/%40peralva%2Fcustom-date)](https://www.npmjs.com/package/@peralva/custom-date?activeTab=versions)
[![GitHub Release Date](https://img.shields.io/github/release-date/peralva/custom-date)](https://github.com/peralva/custom-date/releases)
[![GitHub License](https://img.shields.io/github/license/peralva/custom-date)](https://github.com/peralva/custom-date?tab=MIT-1-ov-file#readme)
[![NPM Downloads](https://img.shields.io/npm/dm/%40peralva%2Fcustom-date)](https://www.npmjs.com/package/@peralva/custom-date)
[![NPM Publish](https://github.com/peralva/custom-date/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/peralva/custom-date/actions/workflows/npm-publish.yml)

## Installation

```bash
npm install --save @peralva/custom-date
```

## Usage

### Get date string from a mask

```ts
import { CustomDate } from '@peralva/custom-date';

const date = new CustomDate();

const stringDate = date.toCustomString('yyyy-MM-dd HH:mm:ss.SSS', {
	timezone: -180,
});

console.log(stringDate);
```

### Change date instance from a mask

```ts
import { CustomDate } from '@peralva/custom-date';

const date = new CustomDate();

date.fromString('20241214 12:34:56.789', 'yyyyMMdd HH:mm:ss.SSS', {
	timezone: -180,
});

console.log(date);
```
npm package: @peralva/npm-template
Description: NPM Template
Author: Bruno Peralva
Latest version: 1.0.5

# @peralva/npm-template

NPM Template

[![NPM Version](https://img.shields.io/npm/v/%40peralva%2Fnpm-template)](https://www.npmjs.com/package/@peralva/npm-template?activeTab=versions)
[![GitHub Release Date](https://img.shields.io/github/release-date/peralva/npm-template)](https://github.com/peralva/npm-template/releases)
[![GitHub License](https://img.shields.io/github/license/peralva/npm-template)](https://github.com/peralva/npm-template?tab=MIT-1-ov-file#readme)
[![NPM Downloads](https://img.shields.io/npm/dm/%40peralva%2Fnpm-template)](https://www.npmjs.com/package/@peralva/npm-template)
[![NPM Publish](https://github.com/peralva/npm-template/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/peralva/npm-template/actions/workflows/npm-publish.yml)

## Installation

```bash
npm install @peralva/npm-template
```

## Usage

```ts
import npmTemplate from '@peralva/npm-template';
console.log(npmTemplate);
```
npm package: @peralva/npm-teste
Description: Validate CPF and CNPJ
Author: Bruno Peralva
Latest version: 1.0.8

# @peralva/validate-cpf-cnpj

Validate CPF and CNPJ

[![NPM Version](https://img.shields.io/npm/v/%40peralva%2Fvalidate-cpf-cnpj)](https://www.npmjs.com/package/@peralva/validate-cpf-cnpj?activeTab=versions)
[![GitHub Release Date](https://img.shields.io/github/release-date/peralva/validate-cpf-cnpj)](https://github.com/peralva/validate-cpf-cnpj/releases)
[![GitHub License](https://img.shields.io/github/license/peralva/validate-cpf-cnpj)](https://github.com/peralva/validate-cpf-cnpj?tab=MIT-1-ov-file#readme)
[![NPM Downloads](https://img.shields.io/npm/dm/%40peralva%2Fvalidate-cpf-cnpj)](https://www.npmjs.com/package/@peralva/validate-cpf-cnpj)
[![NPM Publish](https://github.com/peralva/validate-cpf-cnpj/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/peralva/validate-cpf-cnpj/actions/workflows/npm-publish.yml)

## Installation

```bash
npm install @peralva/validate-cpf-cnpj
```

## Usage

```ts
import { validateCpfCnpj } from '@peralva/validate-cpf-cnpj';

const cpfCnpj = validateCpfCnpj('123 456 789 09');

console.log(cpfCnpj.parsed, cpfCnpj.masked);

try {
	validateCpfCnpj('12 345 678 9012 34', (issue) => {
		if (issue.type === 'digits') {
			return `Issue Type: ${issue.type}\nIssue Expected: ${issue.expected}\nIssue Received: ${issue.received}\nData Parsed: ${issue.data.parsed}\nData Received: ${issue.data.received}\nData Masked: ${issue.data.masked}`;
		}

		return issue.defaultError;
	});
} catch (err) {
	if (err instanceof CpfCnpjError) {
		if (err.issue.type === 'digits') console.error(err.message);
	}
}
```
npm package: @peralva/services
Description: Services
Author: Bruno Peralva
Latest version: 1.0.4

# @peralva/services

Services

[![NPM Version](https://img.shields.io/npm/v/%40peralva%2Fservices)](https://www.npmjs.com/package/@peralva/services?activeTab=versions)
[![GitHub Release Date](https://img.shields.io/github/release-date/peralva/npm-services)](https://github.com/peralva/npm-services/releases)
[![GitHub License](https://img.shields.io/github/license/peralva/npm-services)](https://github.com/peralva/npm-services?tab=MIT-1-ov-file#readme)
[![NPM Downloads](https://img.shields.io/npm/dm/%40peralva%2Fservices)](https://www.npmjs.com/package/@peralva/services)
[![NPM Publish](https://github.com/peralva/npm-services/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/peralva/npm-services/actions/workflows/npm-publish.yml)

## Installation

```bash
npm install --save @peralva/services
```

## Usage

```ts
import { services } from '@peralva/services';

const response = await services({
	url: 'https://jsonplaceholder.typicode.com/posts',
	method: 'GET',
});

if (response.status === 200) {
	response.body.forEach((value) => {
		console.log(value.title);
	});
}
```
npm package: @peralva/tsconfig
Description: TypeScript Configuration
Author: Bruno Peralva
Latest version: 1.0.5

# @peralva/tsconfig

TypeScript Configuration

[![NPM Version](https://img.shields.io/npm/v/%40peralva%2Ftsconfig)](https://www.npmjs.com/package/@peralva/tsconfig?activeTab=versions)
[![GitHub Release Date](https://img.shields.io/github/release-date/peralva/tsconfig)](https://github.com/peralva/tsconfig/releases)
[![GitHub License](https://img.shields.io/github/license/peralva/tsconfig)](https://github.com/peralva/tsconfig?tab=MIT-1-ov-file#readme)
[![NPM Downloads](https://img.shields.io/npm/dm/%40peralva%2Ftsconfig)](https://www.npmjs.com/package/@peralva/tsconfig)
[![NPM Publish](https://github.com/peralva/tsconfig/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/peralva/tsconfig/actions/workflows/npm-publish.yml)

## Installation

```bash
npm install -D @peralva/tsconfig
```

## Usage

Add to `tsconfig.json`:

```json
{
	"extends": "@peralva/tsconfig"
}
```
npm package: @peralva/validate-cpf-cnpj
Description: Validate CPF and CNPJ
Author: Bruno Peralva
Latest version: 1.2.0

# @peralva/validate-cpf-cnpj

Validate CPF and CNPJ

[![NPM Version](https://img.shields.io/npm/v/%40peralva%2Fvalidate-cpf-cnpj)](https://www.npmjs.com/package/@peralva/validate-cpf-cnpj?activeTab=versions)
[![GitHub Release Date](https://img.shields.io/github/release-date/peralva/validate-cpf-cnpj)](https://github.com/peralva/validate-cpf-cnpj/releases)
[![GitHub License](https://img.shields.io/github/license/peralva/validate-cpf-cnpj)](https://github.com/peralva/validate-cpf-cnpj?tab=MIT-1-ov-file#readme)
[![NPM Downloads](https://img.shields.io/npm/dm/%40peralva%2Fvalidate-cpf-cnpj)](https://www.npmjs.com/package/@peralva/validate-cpf-cnpj)
[![NPM Publish](https://github.com/peralva/validate-cpf-cnpj/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/peralva/validate-cpf-cnpj/actions/workflows/npm-publish.yml)

## Installation

```bash
npm install --save @peralva/validate-cpf-cnpj
```

## Usage

```ts
import { CpfCnpjError, validateCpfCnpj } from '@peralva/validate-cpf-cnpj';

const cpfCnpj = validateCpfCnpj('123 456 789 09', { clearData: true });

console.log(cpfCnpj.parsed, cpfCnpj.masked);

try {
	validateCpfCnpj('12 345 678 9012 34', {
		errorMap(issue) {
			if (issue.type === 'digits') {
				return `Issue Type: ${issue.type}\nIssue Expected: ${issue.expected}\nIssue Received: ${issue.received}\nData Parsed: ${issue.data.parsed}\nData Received: ${issue.data.received}\nData Masked: ${issue.data.masked}`;
			}

			return issue.defaultError;
		},
	});
} catch (err) {
	if (err instanceof CpfCnpjError) {
		if (err.issue.type === 'digits') console.error(err.message);
	}
}
```