react-forms-validations

npm install react-forms-validations

React Forms is a wrapper library around React Formik and Yup validator with custom Form and Field implementation.

Check Demo

This React app follows Client App Guidelines.

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