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:
-
Layouts - Veritical and Horizantal
-
Themes - Default comes with two themes
-
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
-
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