react-flexible-form-resolvers v1.0.0

React Flexible Form Resolvers

React Flexible Form Resolvers is a collection of resolvers. Resolvers transform errors generated by validation libraries to format that is understood by React Flexible Form. Currently there is only one resolver for Yup.

Install

 npm i react-flexible-form-resolvers react-flexible-form yup

Usage

Example below requires Yup installation

import { useCallback } from 'react';
import { Field, getInErrors, OnSubmit, useForm } from 'react-flexible-form'
import { yupResolver } from 'react-flexible-form-resolvers'
import * as Yup from 'yup'

type Values = {
  firstName: string,
  lastName: string,
}

const resolver = yupResolver(Yup.object({
  firstName: Yup.string().required('Required'),
  lastName: Yup.string().required('Required')
}))

export default function SomeForm () {
  const onSubmit = useCallback<OnSubmit<Values>>(
    ({ formControl: { values } }) => {
      alert(`Form values: \n ${JSON.stringify(values)}`);
    },
    [],
  );

  const formControl = useForm({
    initialValues: {
      firstName: '',
      lastName: '',
    },
    onSubmit,
    resolver,
  })

  return <div>/* Form Controls */</div>;
};