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.

Installation

Regular library installation via npm:

npm install afreactforms

Import is as follows:

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:

{ 
    initialValues: {
        [inputName]: either an empty string "", or "some text"
    }
    validationSchema: yup validation schema
}

This gives:

const SignupSchema = Yup.object().shape({your validation});

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

Using the Form

Next, you need a form as follows:

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 (
        <Form
            //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
            <p>Registration</p>
            //!For library input fields, you need to provide the name - from initialValues
            <Field
                //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
            <FieldError name={'email'}>
                //You can use like this, with a function (errorMsg: string) => ReactNode;
                {errorMsg => {
                    return <a>{errorMsg}</a>
                }}
            </FieldError>

            <Field name={'password'} type={'password'}/>
            //Or simply provide an element that has an errorMsg prop inside
            <FieldError name={'password'}>
                //function MyErrorComponent({className, errorMsg}) {...}
                <MyErrorComponent />
            </FieldError>

            //Similarly, you can get server error*, by passing name - serverError
            //Without providing a component, it will return <p>Message</p>
            <FieldError name={'serverError'}
                //you can specify classes
                        className={'blue'}
            />
            //Regular button to submit the form
            <button type={"submit"}>Submit</button>
        </Form>
    )
}

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.

Usage:

<Form onSubmit={handleOnSubmit} serviceProp={service}>
    // child elements
</Form>

Field

Input field component that automatically synchronizes with the form context.

<Field name="email" type="email" placeholder="Insert your email" />

FieldError

Component to display field errors.

Usage:

//Без ноды
//Without a node
<FieldError name="email" />
//With a function
<FieldError name="email">
    {(errorMsg) => <span style={{color: 'red'}}>{errorMsg}</span>}
</FieldError>
//With a component
//function MyErrorComponent({className, errorMsg}) {...}
<FieldError name="email">
    <CustomErrorComponent />
</FieldError>

useForm Hook

A hook to manage the form logic.

Usage:

const { values, errors, service } = useForm({ initialValues, validationSchema });

License

MIT

Contacts

For issues or suggestions, use GitHub