use-form-fields

Demo

To get it started, add use-form-fields to your project:

npm install --save use-form-fields

or

yarn add use-form-fields --save

Please note that use-form-fields requires react@>=16.8.6 as a peer dependency.

Form Schema

import { useForm } from 'use-form-fields';


const formSchema = {
    ['name_field']: {
        type: `'text' | 'password' | 'email' | 'range' | 'radio' | 'checkbox'` (optional),
        value: `string (optional)`,
        checked: `boolean (optional)`,
        minLen: `number (optional)`,
        maxLen: `number (optional)`,
        validations: `array of function`,
        fieldProps: ` native props of html element`,
        immediatelyValidate: ` boolean (optional)`,
        error: `string (optional`,
    }
}

const { form } = useForm(formSchema);
  

form consists of:

fields

{
    [key: string]: {
        fieldProps: {
            value: string,
            name: string,
            required?: boolean,
            onChange: onChangeType
        },
        error?: string,
        toValid?: () => void,
        radioOptions?: any[],
    }
}

toJSON

function () => return { key: value }

toValidate

 function () => return boolean

Examples

SimpleForm Demo

import { useForm } from 'use-form-fields';


export const SimpleForm = () => {
    const { form: { fields }, form } = useForm({
        test: {},
    });

    const onSubmit = (e) => {
        e.preventDefault();
        if (form.toValidate()) {
            console.log(form.toJSON());
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <input {...fields.test.fieldProps} />
            <button type="submit">submit</button>
        </form>
    );
};

ValidationForm Demo

import { useForm } from 'use-form-fields';


const validateFirstName = (value) => {
    if (value === 'John') {
        return 'John already exist';
    }

    return null;
};
const validateLastName = (value) => {
    if (value === 'Smith') {
        return 'Smith already exist';
    }

    return null;
};

export const ValidationForm = () => {
    const { form: { fields }, form } = useForm({
        firstName: { value: 'John', validations: [validateFirstName] },
        lastName: { validations: [validateLastName] },
        email: { type: 'email', required: true, minLen: 8 },
        password: { type: 'password', required: true, minLen: 8 },
    });

    const onSubmit = (e) => {
        e.preventDefault();
        if (form.toValidate()) {
            console.log(form.toJSON());
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <input {...fields.firstName.fieldProps} />
            <span>{fields.firstName.error}</span>
            <input {...fields.lastName.fieldProps} />
            <span>{fields.lastName.error}</span>
            <input {...fields.email.fieldProps} />
            <span>{fields.email.error}</span>
            <input {...fields.password.fieldProps} />
            <span>{fields.password.error}</span>
            <button type="submit">submit</button>
        </form>
    );
};

LoginForm

import { useForm } from 'use-form-fields';


export const LoginForm = () => {
    const { form: { fields }, form } = useForm({
        email: {
            type: 'email',
        },
        password: {
            type: 'password',
        },
    });

    const onSubmit = (e) => {
        e.preventDefault();
        if (form.toValidate()) {
            console.log(form.toJSON());
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <input {...fields.email.fieldProps} />
            <input {...fields.password.fieldProps} />
        </form>
    );
};

CheckboxForm

import { useForm } from 'use-form-fields';


export const CheckboxForm = () => {
    const { form: { fields }, form } = useForm({
        test: {
            type: 'checkbox',
            checked: false,
        },
    });

    const onSubmit = (e) => {
        e.preventDefault();
        if (form.toValidate()) {
            console.log(form.toJSON());
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <input {...fields.test.fieldProps} />
            <button type="submit">submit</button>
        </form>
    );
};

SelectForm

import { useForm } from 'use-form-fields';


export const SelectForm = () => {
    const { form: { fields }, form } = useForm({
        test: {
            value: '',
        },
    });

    const onSubmit = (e) => {
        e.preventDefault();
        if (form.toValidate()) {
            console.log(form.toJSON());
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <select {...fields.test.fieldProps}>
                <option value="">please select</option>
                <option value="male">male</option>
                <option value="female">female</option>
            </select>
            <button type="submit">submit</button>
        </form>
    );
};

RadioForm

import { useForm } from 'use-form-fields';


export const RadioForm = () => {
    const { form: { fields }, form } = useForm({
        test: {
            type: 'radio',
            value: '',
            options: [
                {
                    option: 'male',
                }, {
                    option: 'female',
                },
            ],
        },
    });

    const onSubmit = (e) => {
        e.preventDefault();
        if (form.toValidate()) {
            console.log(form.toJSON());
        }
    };

    return (
        <form onSubmit={onSubmit}>
            {fields.test.radioOptions?.map((optionField) => (
                <input {...optionField} />
            ))}
            <button type="submit">submit</button>
        </form>
    );
};