A library for simplified form management in React, built upon concepts of easy handling.
Works with React(18.0.0+) and Next.js(12, 13.0+)

English | Русский

Motivation and Purpose of the Library

While working on yet another form development, using Formik or React-Hook-Forms,
I couldn't find a convenient tool that was also elegant and simple to use.

This led to the creation of afreactforms, which aims to address these issues.

For validation, it uses yup.

Installation

Regular library installation via npm:
``bash
npm install afreactforms
`
Import is as follows:
`javascript
import {useForm, Form, Field, FieldError} from "afreactforms";
`

Usage

Setting up and using is extremely simple.
Let's say we have a form with email and password.

We need to use the useForm hook, which takes an object as follows:
`typescript jsx
{
initialValues: {
[inputName]: either an empty string "", or "some text"
}
validationSchema: yup validation schema
}
`
This gives:
``typescript jsx
const SignupSchema = Yup.object().shape({your validation});

const {values, errors, serverError, touches, setServerError, service} =
useForm({initialValues: {email: '', password: ''}, validationSchema: SignupSchema});
``
Outputs are:

Name	Description
values	Object with inputs {[name]: input string}
errors	Object with errors {[name]: error string}
serverError	String with server error, see [Go to the errors section]
touches	Object with input focus indicator {[name]: boolean value}
setServerError	Function to update the server error state
service	Object for library form functionality. DO NOT USE OUTSIDE < Form />

$3

Next, you need a form as follows:

`typescript jsx
import {useForm, Form, Field, FieldError} from "afreactforms";

function Component(){
//use the useForm hook
const {values, errors, serverError, touches, setServerError, service} = useForm({
initialValues: {
email: '',
password: '',
name: '',
}, validationSchema: SignupSchema
});

//render the element
return (

//You can provide a class
className={'flex flex-col gap-1'}
//You must provide a submit function
onSubmit={() => {
fetch('Server request with form').then(
result => ...,
error => setServerError("Some error!")
)
}}
//MUST PASS THIS PROP
serviceProp={service}
>
//Fill with any nodes

Registration

//!For library input fields, you need to provide the name - from initialValues
//Mandatory - name from initialValues
name={'email'}
//Mandatory - input type
type={'email'}
//Optional - classes
className={'bg-red'}
//Optional - placeholder
placeholder={'Enter email'}
/>
//Optional component for displaying validation errors
//Provide name - from initialValues

//You can use like this, with a function (errorMsg: string) => ReactNode;
{errorMsg => {
return {errorMsg}
}}



//Or simply provide an element that has an errorMsg prop inside

//function MyErrorComponent({className, errorMsg}) {...}



//Similarly, you can get server error*, by passing name - serverError
//Without providing a component, it will return

Message

//you can specify classes
className={'blue'}
/>
//Regular button to submit the form
Submit

)
}

`
That's it, now you have a form that will change, display errors, validation, and has automated functionality.

Main Components

Form

A wrapper component for your form, providing context for its children.

Component Props:

Name	Mandatory	Description
children	Yes	Form's child elements.
onSubmit	Yes	Form submit handler.
className	No	Class name for styling.
serviceProp	Yes	Form's service properties.

Usage:
`typescript jsx

// child elements

`

Field

Input field component that automatically synchronizes with the form context.

Component Props:

Name	Mandatory	Description
name	Yes	Field's name.
type	No	Input field type, e.g., "text", "email", etc.
placeholder	No	Input field placeholder.
className	No	Class name for styling.

Usage:

`jsx

`

FieldError

Component to display field errors.

Component Props:

Name	Mandatory	Description
name	Yes	Name of the field to display error for. "serverError" - for server errors. gets serverError, set by setServerError("")
children	No	Custom component to display error or a function to render the error.
className	No	Class name for styling.

Usage:
`jsx
//Без ноды
//Without a node

//With a function

{(errorMsg) => {errorMsg}}

//With a component
//function MyErrorComponent({className, errorMsg}) {...}



`

useForm Hook

A hook to manage the form logic.

Hook Properties:

Name	Mandatory	Description
initialValues	Yes	Initial values for the form fields.
validationSchema	Yes	Validation schema for the fields using yup.

Usage:
`jsx
const { values, errors, service } = useForm({ initialValues, validationSchema });
``
Return:

Name	Description
values	Object with inputs {[name]: input string}
errors	Object with errors {[name]: error string}
serverError	String with server error, see [Go to the errors section]
touches	Object with input focus indicator {[name]: boolean value}
setServerError	Function to update the server error state
service	Object for library form functionality. DO NOT USE OUTSIDE < Form />

License

MIT

Contacts

For issues or suggestions, use GitHub