Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
react-form-reducer
Advanced tools
A utility of React hooks and contexts to provide simpler form field management, in addition to support of frontend validation and backend validation error processing
A utility of React hooks and a context that provide a simpler form field management, in addition to support of frontend validation and backend validation error processing. The library uses the React built-in reducers and context with no dependencies to achieve a typescript oriented way of managing form state efficiently and heling developers with autosuggestion of form fields in both setters and getters.
> This package works best with TypeScript
→ :feather: Lightweight with no dependencies
npm install react-form-reducer
A simple way of using this package is as follows:
import { useForm } from "react-form-reducer";
// Define your form body type
type FormInterface = {
name: string;
email: string;
}
const MyComponent = ()=>{
// Initialize from hook
const { fields, assignFieldInput } = useForm<FormInterface>({
name: '', // Default values
email: ''
})
return (
<form>
<div>
<label>Name:</label>
<input
type="text"
{...assignFieldInput('name')}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
{...assignFieldInput('email')}
/>
</div>
</form>
)
}
export default MyComponent;
Example using useHook
Example using FormContextProvider
and useFormContext
This library provides both a hook and a context provider, the useForm
hook can be used for single component forms, and useFormContext
can be used for multi-component forms.
useForm
hookThis hook can be used for single component forms, and has plenty of usefull states and actions:
const {
//Fields state
fields,
//Fields state setters
setField,
setFields,
handleInputChange,
assignFieldInput,
assignFieldUI,
reset,
// Utility states
isDirty,
setIsDirty,
isBusy,
setIsBusy,
step,
setStep,
// Meta Data State
meta,
setMeta,
setAllMeta,
// Validate trigger
validate,
// Validate watcher state
validationWatcher,
// Validation errors = useFormErrors()
errors
} = useForm<
MyFormInterface,
MyMetaInterface //optional, only required if you use the meta state
>({
...default values go here
},
{
// here goes the options // optional
onUpdateFields: (data)=> {} //optional config
validation: new Resolver //optional config
},
{
//meta default values // optional, only if you wish to use the meta state
metafield: 'default',
...
});
useForm
& useFormContext
fields
The state object of form body ()
setField('name', value)
This can be used to sets a field value by name
setFields(data, isDirty?: boolean = true)
This can be used to sets all the fields values at once
If you wish set a few values only instead of all field values do the following:
setFields({...fields, name: 'Jane', surname: 'Doe'})
handleInputChange('name')
This can be used to directly handle ChangeEvents on HTML form elements, and automaticly assign the new values to the fields.
assignFieldInput('name')
This can be used to directly assign all usefull attributes to HTML form elements (input,textarea,select), this function will return an object with values for element attribute: value
, onChange
and disabled
, so it can be simply used this way on an input:
<input
type="text"
{...assignFieldInput("email")}
/>
assignFieldUI('name')
This is similar to assignFieldInput
but returns additional properties error
& helperText
, this is usefull for UI components that support those properties like MUI and :
<TextField
{... assignFieldUI("email")}
/>
reset()
This will reset all the field values to the default values
isDirty
& setIsDirty
This state can be used to detect if the user made changes to the field values and handle it.
isBusy
& setIsBusy
This state can be used to handle the loading and disabled logic, this state has to be set and reset as part of your form submission logic.
step
& setStep
This state that can be usefyll when handling stepped forms.
meta
& setMeta
& setAllMeta
This state is similar to the fields state, but isn't part of the validation of reset logic, can be usefull for when storing extra data that is used accross components but not passed with the form submission.
validate(fieldsToCheck?: string[])
This is the trigger for running hte validation, not passing any fields will trigger a full validation on all fields, otherwise if you pass an array of field names it will do a partial validation for them. More info on how to setup validation rules this can be found below in the validation section.
validationWatcher
This is a state validation response, it can be useful if you wish to display or print validation errors in real time.
errors
This is property that returns the useFormErrors
hook used by the form hook, the form hook will use this to process frontend validation errors, but you use it outside to process BackEnd errors outside the hook, more info on how to use this in the useFormErrors section below.
useForm
& FormContextProvider
You can pass these options to the hook and context provider:
onUpdateFields: (data)=>data
This option is an event option that allows you to manipulate the fields state data everytime they are updated.
validation: new Resolver(...)
This option allows you to pass a validation resolver to provide the ability of validating fields, more info about this can be found in the validation section.
useFormContext
& FormContextProvider
The context provider and hook are helpful for when sharing the form state between multiple components (for example: A multi-step form).
const WrapperComponent = ()=>{
const FormProvider = FormContextProvider<MyFormInterface>;
return (
<FormProvider
defaultValues={{
email: '',
name: '',
type: '',
terms: false
}}
options={{
validation: new Resolver({
email: 'required|email',
name: 'required',
type: 'required',
terms: 'accepted'
})
}}
>
<MyFormComponent />
</FormProvider>
);
}
useFormContext
useHoo
k, just make sure you call this hook inside the context provider you setup before:const MyFormComponent = ()=>{
// This can be called on any child components under the context provider
const { fields } = useFormContext<MyFormInterface>();
return (....);
}
useFormErrors
a hook that handles errorsThis hook is provided as the error
property in the previous hooks, but can also be used on its own.
const errors = useFormErrors();
// Sets error messages
errors.set(data);
// Add error message for field
errors.add('field_name', 'Invalid value');
// Check if errors exist for field
error.has('field_name');
// Check if errors exist for specific fields
error.hasAny(['field_1', 'field_2']);
// Returns the array of error messages for field
error.get('field_name');
// Returns the first error messages for field
error.first('field_name');
// Clears error messages for field;
error.forget('field_name');
// Clears all error messages
error.forget();
The error messages should follow the Errors
type exported by the package, an example of a valid error data:
{
'name: [
'This field is required'
],
'password': [
'Password should be at least 6 characters',
'No whitespace allowed'
]
}
To use validation on form fields, you need to install the resolver library react-form-reducer-validator
:
npm i react-form-reducer-validator
The resolver wraps and uses the validatorjs
library, the library allows for a neat & simple way of adding validation rules. and the resolver allows for partial validation which is useful for stepped forms. You can also build and use your own resolver library if you like!
import { Resolver } from 'react-form-reducer-validator';
type MyValidatedFormType = {
name: string;
email: string;
password: string;
password_confirmation: string;
terms: boolean;
};
export function ValidatedForm() {
const {
fields,
handleInputChange,
validate,
errors
} = useForm<MyValidatedFormType>(
{
name: '',
email: '',
password: '',
password_confirmation: '',
terms: false
},
{
validation: new Resolver(
{
// Validation rules
name: 'required',
email: 'required|email',
password: 'required',
password_confirmation: 'required|same:password',
terms: 'accepted'
},
{
// Custom messages
'accepted.terms': 'Please accept the :attribute',
'same.password_confirmation': "Passwords don't match"
}
)
}
);
const handleSubmit = async ()=>{
const { passed } = await validate()
if(!passed){
// throw error
}
}
}
Further documentation on the validation resolver can be found on its repo: https://github.com/sweetscript/react-form-reducer-validator
To process the errors returned from the backend you can use the useFormErrors
hook, as long as they're in the suitable format.
Feedback, Issue reports, suggestions and contributions are appreciated and welcome.
https://github.com/sweetscript/react-form-reducer/issues
https://github.com/sweetscript/react-form-reducer/discussions
FAQs
A utility of React hooks and contexts to provide simpler form field management, in addition to support of frontend validation and backend validation error processing
The npm package react-form-reducer receives a total of 13 weekly downloads. As such, react-form-reducer popularity was classified as not popular.
We found that react-form-reducer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.