hookable-unform v1.0.19

hookable-unform

A set of React Hooks to use with Unform

Getting Started

• yarn add hookable-unform yup @unform/core or

• npm i hookable-unform yup @unform/core

  • yup and @unform/core are required as peer dependencies

Hooks

All hooks have two variations, the one that receives the form reference as a parameter and the one that returns a reference to be used later, this second one always suffixes the word Ref

import { useRef } from 'react';
import { useFormValidator, useFormValidatorRef } from 'hookable-unform';

import schema from './schema'; // Yup Schema

const formRef = useRef(null);

const validateForm = useFormValidator(formRef, schema);
const [formRef, validateForm] = useFormValidatorRef(schema);

useFormValidatorRef

useFormValidator execute validation on your form based in a Yup Schema.

import { useFormValidatorRef } from 'hookable-unform';

import schema from './schema'; // Yup Schema

const [formRef, validateForm] = useFormValidatorRef(schema);

const handleSubmit = useCallback(async () => {
  const validationResult = await validateForm();

  if (validationResult.success) {
    console.log(validationResult.data);
  } else {
    console.log(validationResult.errors);
  }
}, [validateForm]);

<Form onSubmit={handleSubmit} ref={formRef}>
  {/* inputs */}
</Form>;

Options in returned function of hook

• applyErrors: boolean: set if automatically apply founded errors, default is true

useFormHandlersRef

userFormHandlers execute the ref null verification, and you can call function without Object is possibly 'null', exclude use of ?. operator.

import { useFormHandlersRef } from 'hookable-unform';

const [formRef, { getData, setData, submitForm, ...rest }] = useFormHandlersRef();

const handleSubmit = useCallback(async () => {
  console.log(getData());
}, [validateForm]);

<Form onSubmit={handleSubmit} ref={formRef}>
  {/* inputs */}
</Form>;