Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nikhilsarvaiye/react-forms-validations
React Forms is a React starter and wrapper library around React Formik library and Yup validator with custom Form and Field implementation
https://github.com/nikhilsarvaiye/react-forms-validations
boilerplate cache form formik handler jest layout querystring react scss starter-kit theme unit-testing validation webpack yup
Last synced: 2 days ago
JSON representation
React Forms is a React starter and wrapper library around React Formik library and Yup validator with custom Form and Field implementation
- Host: GitHub
- URL: https://github.com/nikhilsarvaiye/react-forms-validations
- Owner: nikhilsarvaiye
- Created: 2020-05-17T15:26:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T22:29:18.000Z (over 2 years ago)
- Last Synced: 2024-10-31T09:47:17.730Z (6 days ago)
- Topics: boilerplate, cache, form, formik, handler, jest, layout, querystring, react, scss, starter-kit, theme, unit-testing, validation, webpack, yup
- Language: JavaScript
- Homepage: https://react-forms.azurewebsites.net/
- Size: 639 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-forms-validations
`
npm install react-forms-validations
`
React Forms is a wrapper library around React [Formik](https://github.com/jaredpalmer/formik) and [Yup](https://github.com/jquense/yup) validator with custom Form and Field implementation.
Check [Demo](https://react-forms.azurewebsites.net/)
This React app follows [Client App Guidelines](https://github.com/nikhilsarvaiye/client-app-coding-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
