Talesoft React Forms

What is it

A form handling library for React very similar to Formik.

It's laid out to be performant and thus uses Faceboook's ImmutableJS internally to handle the whole form state.

It also primarily uses hooks and functional components.

You don't need to know anything about the ImmutableJS API, it's completely hidden in the features of this library.

Features

• React & React Native support.
• Hooks to easily build custom components for it.
• Blazing fast. Got a form with over 300 fields? No problem, thanks to ImmutableJS.
• All HTML inputs available as fully integrated and easy to use components.
• Validation in-built, validator-agnostic.

Install

Use NPM to install the package

npm i @talesoft/react-forms

TypeScript typings are included (No @types/* package needed)

How to use it

Basic Login Form

import{Form,FormElement,InputField}from'@talesoft/react-forms'importReact,{useMemo}from'react'functionMyForm(){constinitialValue=useMemo(()=>({email: '',password: '',}),[])functiononSubmit(value){myApi.tokens.create({email: value.email,password: value.password,})}return({/* This is the core of a form */}<ForminitialValue={initialValue}onSubmit={onSubmit}>{/* The HTML Form element */}<FormElement>{/* This acts like a normal HTML <input /> */}<InputFieldtype="email"name="email"/><InputFieldtype="password"name="password"/><buttontype="submit">Login</button>
</FormElement></Form>
)
}

Nested Form

import{Form,FormElement,InputField}from'@talesoft/react-forms'importReact,{useMemo}from'react'functionMyForm(){constinitialValue=useMemo(()=>({firstName: 'John',lastName: 'Doe',social: {linkedIn: '',twitter: '',facebook: '',},}),[])functiononSubmit(value){myApi.users.update(value)}return(<ForminitialValue={initialValue}onSubmit={onSubmit}><FormElement><InputFieldname="firstName"/><InputFieldname="lastName"/><InputFieldname="social.linkedIn"/><InputFieldname="social.twitter"/><InputFieldname="social.facebook"/><buttontype="submit">Update</button></FormElement></Form>)}

Form Arrays

import{Form,FormElement,InputField,FieldArray,SelectField}from'@talesoft/react-forms'importReact,{useMemo}from'react'functionMyForm(){constinitialValue=useMemo(()=>({address: '',openingHours: [{weekday: 'mo',startTime: '10:30:00',endTime: '18:30:00',},]}),[])functiononSubmit(value){myApi.users.update(value)}return(<ForminitialValue={initialValue}onSubmit={onSubmit}><FormElement><InputFieldname="address"/><h3>Opening Hours</h3><FieldArrayname="openingHours">{({ map, push })=>(<div>{map(({ childName, remove })=>(<div><SelectFieldname={childName('weekday')}><optionvalue="mo">Monday</option><optionvalue="tu">Tuesday</option><optionvalue="we">Wednesday</option>{/* etc.. */}</SelectField><InputFieldtype="time"name={childName('startTime')}/><InputFieldtype="time"name={childName('endTime')}/></div>))}<buttontype="button"onClick={()=>push(initialValue)}>
Add another weekday
</button></div>)}</FieldArray><buttontype="submit">Update</button></FormElement></Form>)}

Too bulky? Use hooks to build own components!

// OpeningHoursField.jsximportReact,{useMemo}from'react'import{useFieldArray}from'@talesoft/react-forms'exportdefaultfunctionOpeningHoursField({ name }){const{ map, push }=useFieldArray(name)return(<div>{map(({ childName, remove })=>(<div><SelectFieldname={childName('weekday')}><optionvalue="mo">Monday</option><optionvalue="tu">Tuesday</option><optionvalue="we">Wednesday</option>{/* etc.. */}</SelectField><InputFieldtype="time"name={childName('startTime')}/><InputFieldtype="time"name={childName('endTime')}/></div>))}<buttontype="button"onClick={()=>push(initialValue)}>
Add another weekday
</button></div>)}

// MyForm.jsximport{Form,FormElement,}from'@talesoft/react-forms'importOpeningHoursFieldfrom'./OpeningHoursField'importReact,{useMemo}from'react'functionMyForm(){constinitialValue=useMemo(()=>({address: '',openingHours: [{weekday: 'mo',startTime: '10:30:00',endTime: '18:30:00',},]}),[])functiononSubmit(value){myApi.users.update(value)}return(<ForminitialValue={initialValue}onSubmit={onSubmit}><FormElement><InputFieldname="address"/><h3>Opening Hours</h3><OpeningHoursFieldname="openingHours"/><buttontype="submit">Update</button></FormElement></Form>)}