- Upgraded packages
- Fixed the missing type definitions from dist.
-
Reverted
isFormValid
andisInputValid
function names tovalidateForm
andvalidateInputValue
. -
useFormErrors Type arguments have changed from
useFormErrors<F extends FormValues, E extends FormErrors>
to
useFormErrors<E extends string>
- Complete TypeScript typings overhaul, now both
formValues
andformErrors
objects have autocompletion intellisense, and functions have autocomplete for input field names.
- Removed a redundant code "optimization".
- Extend InputValue InputError to allow null values.
- Remove suppressImplicitAnyIndexErrors tsconfig rule.
- Update type reference for change handlers.
- Extend Change handlers to include
HTMLTextAreaElement
andHTMLSelectElement
.
- Complete TypeScript typings overhaul.
- Improved api naming -
validateForm
andvalidateInputValue
deprecated and replaced withisFormValid
andisInputValid
.
- Add .npmignore file so that the typescript files are included in the npm package when published.
- Removing unused code.
- Improving tests.
- Migration to TypeScript.
- Improved documentation.
Input errors are now a single string | JSX.Element
rather than an array. This will be an improvement to the development experience.
Nearly all implementations of input errors display a single error message rather than a list of several error messages.
All references to setInputError
and formErrors.inputName
should be modified to use string | JSX.Element
instead of an array.
If need to display multiple errors, you can simply combine the different validation functions into one, and return a custom message that way.
Updated documentation, example and test form fields to map directly to name
rather than id
. The fields were mapping id
to both id
and name
props, I have since realized that this isn't a cool thing to do :P
Just so that everyone is clear, this package maps formValues to name
and not id
! Apologies for any confusion.
validateInputValue
has been extended to return a boolean.
-
setInputValue
has been extended to accept aReact.SyntheticEvent
and can be used in place ofupdateInputValue
. -
validateInputValue
has been extended to acceptinput: String|React.SyntheticEvent
and optionalvalue
so an input can now be validated without using an event. -
clearInputErrors
has been extended to accept aReact.SyntheticEvent
.
-
updateInputValue
has been made redundant. Please usesetInputValue
instead, which has been extended to accept aReact.SyntheticEvent
.- note: this is not a breaking change,
updateInputValue
will be removed in 5.0.0.
- note: this is not a breaking change,
- Created a test suite and setup automated code coverage reporting and testing.
formErrors
used to be an empty object until validation. This caused issues when accessing only one error.
e.g. implementations like this, which should be valid
<input error={formErrors.username[0]}>
had to be written like this to prevent errors
<input error={formErrors.username && formErrors.username[0]}>
Now, its initialized based on the formValidations
object.
{ username: [], password: [] }
This means that if you had previously written input field errors by checking if errors
was truthy, you will now have to check the length as well. This new implementation makes more sense semantically as an empty list should be []
and not null
or undefined
.
e.g.
{
errors && errors.length > 0 && (
<ul
style={{
color: 'red',
margin: '8px 0',
padding: 0,
listStyle: 'none',
}}
>
{errors.map((error, index) => (
<li key={index}>- {error}</li>
))}
</ul>
)
}
setFormValues
is now exposed, this function is the React.useState 'set' function for formValues, useful when setting multiple values at once or updating the form values via props.
validateForm
now returnsformIsValid
, a boolean value, this value can be used to check for errors before submitting the form.
setFormErrors(formErrors)
has been deprecated, input errors should be set viasetInputErrors
or via form and input validate functions.formValidations
used to check null values, now validation functions must return a string or have no return value (undefined).
- useFormValues
resetInputValue(name)
now correctly resets the field to it's initial values rather than to an empty string.
- Renaming internal functions.
- Cleaning up JSDocs, using more consistent naming.