Altiore Form

@altiore/form

Productive, flexible and extensible forms with easy-to-use validation and the most user-friendly API @altiore/form

Русская версияREADME.RU.md

Why?

Let's face it, forms in React are verbose and awkward. This library will help facilitate and speed up the work with forms. It solves the following main problems:

1. Form validation
2. Sending data management
3. Convenient customization of reusable form components (inputs, selects,...)

Peculiarity:

This library, unlike most others, does not store the state of input fields. Within the @altiore/form library, we consider that the data entered into the form is stored on the page. If you need to provide data storage from inputs - you have complete freedom to implement this using your favorite state manager.

This feature means that if you hide the input fields, the data will not be stored.

In other words: hiding data should be equivalent to sending, and at the time of hiding data, you need to save them using your favorite state manager

Installation:

npm

npm i @altiore/form -S

yarn

yarn add @altiore/form

Simplest usage

importReact,{useCallback}from'react';import{Form}from'@altiore/form';constMyForm=()=>{consthandleSubmit=useCallback((values)=>{console.log('form.values is',values);},[]);return(<FormonSubmit={handleSubmit}><inputname="name"/><buttontype="submit">Submit</button></Form>);};

Custom field

Allows you to customize the appearance of the input adds validation functionality and several other useful features. Custom Field in detailsYou could use FieldArray for arrays

importReact,{useCallback}from'react';import{createField,Form}from'@altiore/form';/** * "error" here is added by createField * "name" and "label" comes from usage area */constFieldView=({fieldProps, inputProps, label})=>{return(<div><label>{label}</label><input{...inputProps}/><span>{fieldProps.error}</span></div>);};exportconstField=createField(FieldView);constMyForm=()=>{consthandleSubmit=useCallback((values)=>{console.log('form.values is',values);},[]);return(<FormonSubmit={handleSubmit}><Fieldlabel="Label"name="name"validate={/* you can add validators here */}/><buttontype="submit">Submit</button></Form>);};

Validation

We prefer field-level validation. By analogy with as it is implemented in the browser. But you can also validate all data at the time of sending

importReact,{useCallback}from'react';import{Form,isEmail,isRequired}from'@altiore/form';consttooShort=(value)=>{if(value.length<5){return'Too short';}};constMyForm=()=>{consthandleSubmit=useCallback((values)=>{console.log('form.values is',values);},[]);return(<FormonSubmit={handleSubmit}><Fieldlabel="Email"name="email"validate={[isRequired(),isEmail()]}/><Fieldlabel="Long"name="long"validate={tooShort}/><buttontype="submit">Submit</button></Form>);};

You can also validate form values while sending them

importReact,{useCallback}from'react';import{Form,isEmail,isRequired}from'@altiore/form';constvalidate=(values)=>{consterrors={};if(values.long?.length<5){errors.long='Too short';}returnerrors;};constMyForm=()=>{consthandleSubmit=useCallback((values,setErrors)=>{consterrors=validate(values);if(Object.keys(errors)?.length){setErrors(errors);return;}console.log('Correct data for sending',values);},[]);return(<FormonSubmit={handleSubmit}><Fieldlabel="Long"name="long"/><buttontype="submit">Submit</button></Form>);};

With Typescript

importReact,{useCallback}from'react';import{FieldProps,createField,Form}from'@altiore/form';interfaceIField{label: string;}/** * "error" here is added by createField * "name" and "label" comes from usage area */constFieldView=({fieldProps, inputProps, label}: FieldProps<IField>)=>{return(<div><label>{label}</label><input{...inputProps}/><span>{fieldProps.error}</span></div>);};exportconstField=createField<IField>(FieldView);interfaceFormState{name: string;}constMyForm=()=>{consthandleSubmit=useCallback((values: FormState)=>{console.log('form.values is',values);},[]);return(<Form<FormState>onSubmit={handleSubmit}><Field<FormState>label="Label"name="name"validate={/* you can add validators here */}/><buttontype="submit">Submit</button></Form>);};

Detailed Example

importReact,{useCallback}from'react';import{FieldProps,createField,createFieldArray,createSubmit,Form,isRequired,}from'@altiore/form';interfaceIField{label: string;}constFieldView=createField<IField>(({fieldProps, inputProps, label}: FieldProps<IField>)=>{return(<div><label>{label}</label><input{...inputProps}/><span>{fieldProps.error}</span></div>);},);exportinterfaceIFieldArray{label?: string;}exportconstFieldIngredients=createFieldArray<IFieldArray>(({list})=>{constrenderIng=useCallback(({key, remove})=>{return(<divkey={key}><div><div><buttononClick={remove}type="button">
-
</button></div><div><Fieldlabel="Title"name="title"validate={[isRequired(null)]}/><Fieldlabel="Desc"name="desc"/></div></div></div>);},[]);return(<>{list.map(renderIng)}<buttononClick={list.add}type="button">
Add Ingredient
</button></>);});exportinterfaceISubmit{children: string;className?: string;skipUntouched?: boolean;}exportconstSubmit=createSubmit<ISubmit>(({isInvalid, isSubmitting, isUntouched, ...props}: SubmitProps<ISubmit>)=>{return(<button{...props}disabled={isInvalid||isSubmitting||isUntouched}/>);},);interfaceFormState{name: string;}constMyForm=()=>{consthandleSubmit=useCallback((values: FormState)=>{console.log('form.values is',values);},[]);return(<Form<FormState>onSubmit={handleSubmit}><Field<FormState>label="Label"name="name"validate={isRequired(null)}/><FieldIngredientslabel="Ingredients"name="ingredients"/><Submit>Submit</Submit></Form>);};

Validation detailed example