Added a custom props option to the useFormState's options

[rickyhopkins]

To avoid repeating the same piece of code to add validation feedback to an input field I have added in a customProps function to the formOptions object to allow the addition of custom props through to your inputs.

My current process is to manually get the errorMessage, validity, and touched from the form state manually for each input like so:

const [formState, inputs] = useFormState();
return (
	<div>
		<Input
			{...inputs.email("email")}
			errorMessage={formState.errors.email}
			isValid={formState.validity.email}
			touched={formState.touched.email}
		/>
		<Input
			{...inputs.email("password")}
			errorMessage={formState.errors.password}
			isValid={formState.validity.password}
			touched={formState.touched.password}
		/>
	</div>
);

This is probably not so bad for one or two fields but with a larger form, this would be tedious to manage.

My proposed solution is to be able to configure custom fields that can be defined in the options passed through to useFormState to allow the return type of inputs[fieldType]() to match whatever custom element you are passing it through to.

This can be used like so:

const [, inputs] = useFormState(null, {
	customProps: (formState, name) => ({
		isValid: formState.validity[name],
		errorMessage: formState.errors[name],
                placeholder: name,
		otherProp: "otherProp",
	}),
});
console.log(inputs.text("username"));
/*
 * {
 * 	...baseProps,
 * 	isValid: boolean
 * 	errorMessage: string
 *      placeholder: "username"
 * 	otherProp: "otherProp"
 * }
 */