react-forms

React Forms is a wrapper library around React Formik library and Yup validator with custom Form and Field implementation. The purpose of this library to provide additional support for:

1. Layouts - Veritical and Horizantal

2. Themes - Default comes with two themes

3. Form handlers Handlers to provide form customization with methods like,

   • onInitializing - Fires when Form is getting initilised
   • onReady - Fires when React Form DOM is ready
   • onSubmitting - Fires before submitting form

4. Form Field Handler Handlers to provide form field customization with methods like,

   • getValues - Fires when Form Field is getting initilised
   • setValues - Fires when onBlur event of Field

Form Section

Form Section is a powerful div container to create flexible, customizable layouts created using Css Flex. It is specifically desgined to create complex and nested UI layouts.

Configuration

• layout - string, Default: FormSectionLayoutType.Vertical, Values: [FormSectionLayoutType.Vertical, FormSectionLayoutType.Horizantal]
• theme - string, Default: FormSectionTheme.Default, Values: [FormSectionTheme.Default, FormSectionTheme.White]
• numberOfRowFields - number, Default: 2, Values: [2,3,6], Specify number of form fields needs to show on horizantal layout
• autoSpacing - boolean, Default: false, Specify if want to have auto spacing between child elements, e.g. often we need auto spacing between button or sections
• align - string, Default: None, Values: [FormSectionAlignment.Left, FormSectionAlignment.Right]
• width - string, Default: auto
• cssClasses - string, Default: None, Specify custom css classes
• style - string, Default: None, Specify custom style

Form Query Parameter handler

This handler updates query string parameter on submit and update form values from query parameter values.

Configuration

• queryParams - object, Form property name
• fields - Array, field names
• allFields - boolean, Default: false, Use if want to update use all fields
• urlUpdate - boolean, Default: true, Update Query Url
• autoSubmit - boolean, Default: false, Set true if want to Submit form On Form initilise

Form Field Cache handler

This handler caches form field values in local storage. Configuration

• cache - object, Form Field property name
• provider - string, Default: 'LocalStorage', provider name
• max - number, Default: 10, Specify how many field values to cache

Horizantal Layout

Configuration

• layout - string, Default: FormSectionLayoutType.Horizontal, Form layout property name
• numberOfRowFields - number, Default: 2, Values: [2,3,6], Specify number of form fields needs to show on horizantal layout

Themes

Configuration

• default

• white