{"id":15163191,"url":"https://github.com/nikhilsarvaiye/react-forms-validations","last_synced_at":"2026-04-08T21:31:40.556Z","repository":{"id":55227048,"uuid":"264697641","full_name":"nikhilsarvaiye/react-forms-validations","owner":"nikhilsarvaiye","description":"React Forms is a React starter and wrapper library around React Formik library and Yup validator with custom Form and Field implementation","archived":false,"fork":false,"pushed_at":"2022-02-10T22:29:18.000Z","size":654,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-20T05:16:07.944Z","etag":null,"topics":["boilerplate","cache","form","formik","handler","jest","layout","querystring","react","scss","starter-kit","theme","unit-testing","validation","webpack","yup"],"latest_commit_sha":null,"homepage":"https://react-forms.azurewebsites.net/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikhilsarvaiye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-17T15:26:45.000Z","updated_at":"2020-08-24T11:04:56.000Z","dependencies_parsed_at":"2022-08-14T16:55:02.077Z","dependency_job_id":null,"html_url":"https://github.com/nikhilsarvaiye/react-forms-validations","commit_stats":null,"previous_names":["nikhilsarvaiye/react-forms"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nikhilsarvaiye/react-forms-validations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikhilsarvaiye%2Freact-forms-validations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikhilsarvaiye%2Freact-forms-validations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikhilsarvaiye%2Freact-forms-validations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikhilsarvaiye%2Freact-forms-validations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikhilsarvaiye","download_url":"https://codeload.github.com/nikhilsarvaiye/react-forms-validations/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikhilsarvaiye%2Freact-forms-validations/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31575442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","cache","form","formik","handler","jest","layout","querystring","react","scss","starter-kit","theme","unit-testing","validation","webpack","yup"],"created_at":"2024-09-27T02:20:40.362Z","updated_at":"2026-04-08T21:31:40.540Z","avatar_url":"https://github.com/nikhilsarvaiye.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-forms-validations\n\n`\nnpm install react-forms-validations\n`\n\n![Image of Horizantal Layout](./images/default-theme-validation.png)\n\nReact 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.\n\nCheck [Demo](https://react-forms.azurewebsites.net/)\n\nThis React app follows [Client App Guidelines](https://github.com/nikhilsarvaiye/client-app-coding-guidelines).\n\nThe purpose of this library to provide additional support for:\n\n1. Layouts - Veritical and Horizantal\n2. Themes - Default comes with two themes\n3. Form handlers\n   Handlers to provide form customization with methods like,\n\n    - onInitializing - \u003cem\u003eFires when Form is getting initilised\u003c/em\u003e\n    - onReady - \u003cem\u003eFires when React Form DOM is ready\u003c/em\u003e\n    - onSubmitting - \u003cem\u003eFires before submitting form\u003c/em\u003e\n\n4. Form Field Handler\n    Handlers to provide form field customization with methods like,\n    - getValues - \u003cem\u003eFires when Form Field is getting initilised\u003c/em\u003e\n    - setValues - \u003cem\u003eFires when onBlur event of Field\u003c/em\u003e\n\n## Form Section\n\nForm 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.\n\nConfiguration\n\n- layout - \u003cem\u003estring, Default: FormSectionLayoutType.Vertical, Values: [FormSectionLayoutType.Vertical, FormSectionLayoutType.Horizantal]\u003c/em\u003e\n- theme - \u003cem\u003estring, Default: FormSectionTheme.Default, Values: [FormSectionTheme.Default, FormSectionTheme.White]\u003c/em\u003e\n- numberOfRowFields - \u003cem\u003enumber, Default: 2, Values: [2,3,6], Specify number of form fields needs to show on horizantal layout\u003c/em\u003e\n- autoSpacing - \u003cem\u003eboolean, Default: false, Specify if want to have auto spacing between child elements, e.g. often we need auto spacing between button or sections\u003c/em\u003e\n- align - \u003cem\u003estring, Default: None, Values: [FormSectionAlignment.Left, FormSectionAlignment.Right]\u003c/em\u003e\n- width - \u003cem\u003estring, Default: auto\u003c/em\u003e\n- cssClasses - \u003cem\u003estring, Default: None, Specify custom css classes\u003c/em\u003e\n- style - \u003cem\u003estring, Default: None, Specify custom style\u003c/em\u003e\n\n\n## Form Query Parameter handler\n\nThis handler updates query string parameter on submit and update form values from query parameter values.\n\nConfiguration\n\n- queryParams - \u003cem\u003eobject, Form property name\u003c/em\u003e\n- fields - \u003cem\u003eArray, field names\u003c/em\u003e\n- allFields - \u003cem\u003eboolean, Default: false, Use if want to update use all fields\u003c/em\u003e\n- urlUpdate - \u003cem\u003eboolean, Default: true, Update Query Url\u003c/em\u003e\n- autoSubmit - \u003cem\u003eboolean, Default: false, Set true if want to Submit form On Form initilise\u003c/em\u003e\n\n## Form Field Cache handler\n\nThis handler caches form field values in local storage.\nConfiguration\n    \n- cache - \u003cem\u003eobject, Form Field property name\u003c/em\u003e\n- provider - \u003cem\u003estring, Default: 'LocalStorage', provider name\u003c/em\u003e\n- max - \u003cem\u003enumber, Default: 10, Specify how many field values to cache\u003c/em\u003e\n\n## Horizantal Layout\n\n![Image of Horizantal Layout](./images/white-theme-4fields.png)\n\nConfiguration\n\n- layout - \u003cem\u003estring, Default: FormSectionLayoutType.Horizontal, Form layout property name\u003c/em\u003e\n- numberOfRowFields - \u003cem\u003enumber, Default: 2, Values: [2,3,6], Specify number of form fields needs to show on horizantal layout\u003c/em\u003e\n\n## Themes\n\nConfiguration\n\n- default\n\n![Image of Horizantal Layout](./images/default-theme-validation.png)\n\n- white\n\n![Image of Horizantal Layout](./images/white-theme.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikhilsarvaiye%2Freact-forms-validations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikhilsarvaiye%2Freact-forms-validations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikhilsarvaiye%2Freact-forms-validations/lists"}