react-flexible-form-resolvers
v0.0.12
Published
React Flexible Form validation resolvers
Downloads
236
Maintainers
Readme
Work In Progress !!!
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
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>;
};