Final Form Generator

Final Form Generator is a simple hook for computing props for react-final-form component.

Installation

You need some depedencies in order to use this hook:

• final-form
• final-form-calculate
• react-final-form
• yup

Then you can run:

npm install @capcar/final-form-generator

Usage

import React from 'react';
import * as Yup from 'yup';
import {Form, Field} from 'react-final-form';
import useFormGenerator from '@capcar/final-form-generator';

const fields = [
	{
		type: 'text',
		name: 'text',
		label: 'text',
	},
	{
		type: 'email',
		name: 'email',
		label: 'email',
	},
];

const renderInput = ({field, children = [], index}) => {
	switch (field.type) {
		case 'email':
			return (
				<Field
					key={index}
					name={field.name}
					component="input"
					type="email"
					placeholder={field.label}
				/>
			);
		case 'text':
			return (
				<Field
					key={index}
					name={field.name}
					component="input"
					type="text"
					placeholder={field.label}
				/>
			);
		default:
			return <span key={key}>{`${field.type} not handled`}</span>;
	}
};

export const defaultValidation = (type?: string) => {
	switch (type) {
		case 'email':
			return Yup.string().email().required();
		default:
			return Yup.string().trim().required();
	}
};

const ExampleForm = () => {
	const {dom, validate, decorators, loading} = useFormGenerator({
		defaultValidation,
		fields,
		renderInput,
	});
	return loading ? (
		'Loading'
	) : (
		<Form
			decorators={decorators}
			onSubmit={values => alert(values)}
			validate={validate}
			render={({
				handleSubmit,
				form,
				submitting,
				pristine,
				invalid,
				values,
				errors,
			}) => (
				<form onSubmit={handleSubmit}>
					<div>
						{dom}
						<button type="submit" disabled={invalid || submitting || pristine}>
							Submit
						</button>
					</div>
					<pre>{JSON.stringify(values, 0, 2)}</pre>
					<pre>{JSON.stringify(errors, 0, 2)}</pre>
				</form>
			)}
		/>
	);
};

export default ExampleForm;

API

UseFinalFormGeneratorProps :

• defaultValidation (required): Function the take type of the field and return its default yup validation
• fields (required): Array of fields
• renderInput (required): Function used to render elements of the form. It takes an object with 3 props field (BasicFieldInterface), its children (?React$Node[]) and the index of the field in the fields array
• customValidationSchema?: Yup base schema is you want to use noSortEdges for example.

const customValidationSchema = Yup.object().shape({
	customer: Yup.object().shape({}, ['phone', 'email']),
});

Here, if you put validation on field email or phone it will be add to this shape.

• preValidate: Function than can be called before yup validation. It has the form values as param and should return an object with error message ({[string]: string})

UseFinalFormGeneratorResult :

• decorators: Decorators for decorators props of react-final-form component
• dom: Inputs of the form (React$Node[])
• validate: Validation function for validate props of react-final-form component

License

MIT