react-decode-form v0.1.2
react-decode-form
What?
react-decode-form
is a custom hooks library designed to help manage form data in your React applications. It provides a simple and efficient way to separate the management of internal and external data structures. The form component acts as the boundary, converting the data into the correct structure.
How?
To achieve this separation and conversion, react-decode-form
operates using four key components:
- External structure: This is the user-facing data structure. It should be easily convertible to a string. Examples include units like
MM
,CM
,M
, etc. - Internal structure: This represents the correct data types that your application uses. If you want to standardize the units across your application, you might want to convert everything to
MM
, for example. - Internal-to-external conversion function: A function that handles the conversion from the internal structure to the external structure. It also handles validation.
- External-to-internal conversion function: A function that converts from the external structure to the internal structure.
Installation
npm i react-decode-form
Usage
Here's an example of using react-decode-form
:
import { useForm, FormSchema } from 'react-decode-form';
const schema = {
width: {
in: MM, // External structure
ex: CM, // Internal structure
i2e: mm2cm, // Internal-to-external conversion function
e2i: cm2mm, // External-to-internal conversion function
},
height: {
in: MM, // External structure
},
} satisfies FormSchema;
const Form: React.FC = () => {
const { register, values } = useForm(schema, {
defaultValues: {
width: mkMM(0),
// height is not specified in defaultValues, so its type will be 'number | null'
},
});
const width = values.width; // number
const height = values.height; // number | null
return (
<div>
<input {...register('width')} type="number" />
<input {...register('height')} type="number" />
</div>
);
};
In this example, the schema
defines the external and internal structures, along with the conversion functions. If no conversion is required, elements 2-4 (in,i2e,e2i) can be omitted. It provides a similar API to react-hook-form
, including register
, getValue
, setValue
, errors
, <Controller/>
, etc.
The library ensures type safety. The getValue()
and values
methods return the correct data structure in your internal world. The type of getValue()
and values
corresponds to the internal data structure. If defaultValues
aren't specified for a field, the type will be T | null
.
Contributing
Welcome
License
MIT