`tsx













`

$3

`tsx

`

$3

Optionally supply a key to perform efficient object comparison.

`tsx

{categories.map((category: any, index: number) => (
{category.title}
))}


{form.values.category &&

Optionally supply a key to perform efficient object comparison.

`tsx
{categories.map((category) => (


{category.title}
{' '}

))}

{form.values.category &&

`tsx

`

$3

Allow the user to select multiple checkboxes. The values are stored in an array. Optionally supply a key to perform efficient object comparison.

`tsx
{categories.map((category) => (


{category.title}
{' '}

))}

{form.values.category &&

1. onChange event occurs.
2. Received input string is filtered.
3. Filtered string is parsed and stored in the state.
4. State value is validated.
5. onBlur event occurs.
6. Displayed input value is formatted.

Create a custom input handler to accomodate your needs:

`tsx
const moneyInput = (rules: any = {}) => {
return {
inputHandler: {
filter: (value) => {
// Strip everything that is not a digit, period or dash
return value.match("[0-9\.-]*")[0];
},
parse: (value) => {
// Represent the money amount in cents in the state.
const floatValue = parseFloat(value);

return !isNaN(floatValue) ? Math.round(floatValue * 100) : null;
},
format: (value) => {
// Divide internal value by 100 to get euros and add 2 decimals
return (value / 100).toFixed(2);
},
validate: (value) => {
// Add your custom validation
return value >= rules.min;
}
},
onChange: (value) => {
console.log(Look, the state value (${value}) is represented in cents!);
}
};
};
`

... and use it as follows:

`tsx

`

Similar input handlers can be defined for date, time and other inputs when needed.

Custom components

Assume your custom component accepts an onChange handler:

`tsx
const CustomField = ({ onChange }: { onChange: (value: any) => any }) => {
return onChange(event.target.value)} />;
};
`

Use it as follows:

`tsx
form.set('title', value)} />
`

API

The useForm() hook returns an object with the following methods (besides all input types):

|Method|Description|
|:---|:---|
|set(name: string, value: any): void|Sets an internal value, unsets the formatted value and validity|
|getParsedValue(name: string): any|Retrieves a parsed value from the internal state|
|hasParsedValue(name: string): boolean|Indicates whether the internal state contains a value|
|setParsedValue(name: string, value: any): void|Sets a value in the internal state|
|getInitialValue(name: string): any|Retrieves an initial value|
|hasInitialValue(name: string): boolean|Indicates whether the form contains an initial value|
|getFormattedValue(name: string): string|Retrieves a formatted value from the external state|
|hasFormattedValue(name: string): boolean|Indicates whether the external state contains a value|
|setFormattedValue(name: string, value: any): void|Sets a formatted value in the external state|
|isValid(name: string): boolean|Indicates whether a value is valid|
|setValidity(name: string, valid: boolean): void|Sets the validity of a value|
|getTouched(name: string): boolean|Indicate whether a field has been touched|
|setTouched(name: string, touched: boolean): void|Sets the touched state of a field|
|changed(name?: string): boolean|Indicates whether a value is different from its initial value|
|prepend(name: string, value: any): void|Prepends a value to a list|
|append(name: string, value: any): void|Appends a value to a list|
|moveUp(name: string, index: number): void|Moves a value up in a list|
|moveDown(name: string, index: number): void|Moves a value down in a list|
|swap(first: string, second: string): void|Swaps to values in a list|
|splice(name: string, index: number, count: number): void|Splices a list|
|delete(name: string, index?: number): void|Deletes a value (from a list if an index is given)|
|reset(name?: string): void|Resets the entire state, or just a value if a name is given|
|isEqual(a: any, b: any, key?: string \| number): boolean|Indicates whether two values are equal|

Extended example

Extended example form in which a product with nested properties can be edited.

See https://github.com/emolifeconnect/react-form-state-manager/blob/master/examples/src/App.tsx.

!Form example

`tsx
import React from 'react';

import { InputHandler } from '../../src/InputHandlers';
import useForm from '../../src/useForm';
import CustomField from './CustomField';

// Custom input handler that converts euros to cents internally, and nicely formats the amount externally.
const moneyInput = (rules: any = {}) => {
return {
inputHandler: {
filter: (value) => {
// Strip everything that is not a digit, period or dash
return value.match("[0-9\.-]*")[0];
},
parse: (value) => {
// Store the money amount in cents in the state
const floatValue = parseFloat(value);

return !isNaN(floatValue) ? Math.round(floatValue * 100) : null;
},
format: (value) => {
// Divide state value by 100 to get euros and add 2 decimals
return (value / 100).toFixed(2);
},
validate: (value) => {
// Apply our custom validation
return value >= rules.min;
}
} as InputHandler,
onChange: (value: Number) => {
console.log(Look, the state value (${value}) is represented in cents!);
}
};
};

const App = () => {
const categories = [
{
id: 1,
title: 'State management'
},
{
id: 2,
title: 'Hooks'
},
{
id: 3,
title: 'Forms'
}
];

const product = {
title: 'React form state manager',
description: 'Description',
amount: 1000, // 1000 cents = 10 euros
category: {
id: 2
},
categories: [] as any,
manufacturer: {
name: 'TypeScript'
},
tags: ['react'],
subscribe: true
};

const form = useForm({
values: product
});

return

{JSON.stringify(form.values, null, 2)}

{JSON.stringify(form.formattedValues, null, 2)}

{JSON.stringify(form.valid, null ,2)}